OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

enh: client-side pdf generation

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2025-03-15 17:11:14 +00:00
parent c57db1828f
commit d93828e923
4 changed files with 96 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/lib/components/layout/Navbar/Menu.svelte
View File

@@ -6,6 +6,9 @@
import fileSaver from 'file-saver';
const { saveAs } = fileSaver;
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas-pro';
import { downloadChatAsPDF } from '$lib/apis/utils';
import { copyToClipboard, createMessagesList } from '$lib/utils';
@@ -14,7 +17,8 @@
showControls,
showArtifacts,
mobile,
temporaryChatEnabled
temporaryChatEnabled,
theme
} from '$lib/stores';
import { flyAndScale } from '$lib/utils/transitions';
@@ -58,27 +62,45 @@
};
const downloadPdf = async () => {
const history = chat.chat.history;
const messages = createMessagesList(history, history.currentId);
const blob = await downloadChatAsPDF(localStorage.token, chat.chat.title, messages);
const containerElement = document.getElementById('messages-container');
// Create a URL for the blob
const url = window.URL.createObjectURL(blob);
if (containerElement) {
try {
const canvas = await html2canvas(containerElement, {
backgroundColor: $theme.includes('dark') ? '#000' : '#fff',
scale: 2, // Increases resolution for better quality
height: containerElement.scrollHeight,
windowHeight: containerElement.scrollHeight
});
// Create a link element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = `chat-${chat.chat.title}.pdf`;
const imgData = canvas.toDataURL('image/png');
// Append the link to the body and click it programmatically
document.body.appendChild(a);
a.click();
// A4 size in mm
const pdf = new jsPDF('p', 'mm', 'a4');
const imgWidth = 210; // A4 width in mm
const pageHeight = 297; // A4 height in mm
// Remove the link from the body
document.body.removeChild(a);
const imgHeight = (canvas.height * imgWidth) / canvas.width; // Maintain aspect ratio
let heightLeft = imgHeight;
let position = 0;
// Revoke the URL to release memory
window.URL.revokeObjectURL(url);
// First page
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
// If content overflows, add new pages
while (heightLeft > 0) {
position -= pageHeight;
pdf.addPage();
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
pdf.save('document.pdf');
} catch (error) {
console.error('Error generating PDF', error);
}
}
};
const downloadJSONExport = async () => {

68
src/lib/components/layout/Sidebar/ChatMenu.svelte
View File

@@ -6,6 +6,9 @@
import fileSaver from 'file-saver';
const { saveAs } = fileSaver;
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas-pro';
const dispatch = createEventDispatcher();
import Dropdown from '$lib/components/common/Dropdown.svelte';
@@ -23,7 +26,7 @@
getChatPinnedStatusById,
toggleChatPinnedStatusById
} from '$lib/apis/chats';
import { chats } from '$lib/stores';
import { chats, theme } from '$lib/stores';
import { createMessagesList } from '$lib/utils';
import { downloadChatAsPDF } from '$lib/apis/utils';
import Download from '$lib/components/icons/Download.svelte';
@@ -76,32 +79,45 @@
};
const downloadPdf = async () => {
const chat = await getChatById(localStorage.token, chatId);
if (!chat) {
return;
const containerElement = document.getElementById('messages-container');
if (containerElement) {
try {
const canvas = await html2canvas(containerElement, {
backgroundColor: $theme.includes('dark') ? '#1a202c' : '#fff',
scale: 2, // Increases resolution for better quality
height: containerElement.scrollHeight,
windowHeight: containerElement.scrollHeight
});
const imgData = canvas.toDataURL('image/png');
// A4 size in mm
const pdf = new jsPDF('p', 'mm', 'a4');
const imgWidth = 210; // A4 width in mm
const pageHeight = 297; // A4 height in mm
const imgHeight = (canvas.height * imgWidth) / canvas.width; // Maintain aspect ratio
let heightLeft = imgHeight;
let position = 0;
// First page
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
// If content overflows, add new pages
while (heightLeft > 0) {
position -= pageHeight;
pdf.addPage();
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
pdf.save('document.pdf');
} catch (error) {
console.error('Error generating PDF', error);
}
}
const history = chat.chat.history;
const messages = createMessagesList(history, history.currentId);
const blob = await downloadChatAsPDF(localStorage.token, chat.chat.title, messages);
// Create a URL for the blob
const url = window.URL.createObjectURL(blob);
// Create a link element to trigger the download
const a = document.createElement('a');
a.href = url;
a.download = `chat-${chat.chat.title}.pdf`;
// Append the link to the body and click it programmatically
document.body.appendChild(a);
a.click();
// Remove the link from the body
document.body.removeChild(a);
// Revoke the URL to release memory
window.URL.revokeObjectURL(url);
};
const downloadJSONExport = async () => {