Spaces:
Paused
Paused
File size: 2,909 Bytes
55bd140 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
export const downloadPdf = async (note) => {
const [{ default: jsPDF }, { default: html2canvas }] = await Promise.all([
import('jspdf'),
import('html2canvas-pro')
]);
// Define a fixed virtual screen size
const virtualWidth = 1024; // Fixed width (adjust as needed)
const virtualHeight = 1400; // Fixed height (adjust as needed)
// STEP 1. Get a DOM node to render
const html = note.data?.content?.html ?? '';
const isDarkMode = document.documentElement.classList.contains('dark');
let node;
if (html instanceof HTMLElement) {
node = html;
} else {
const virtualWidth = 800; // px, fixed width for cloned element
// Clone and style
node = document.createElement('div');
// title node
const titleNode = document.createElement('div');
titleNode.textContent = note.title;
titleNode.style.fontSize = '24px';
titleNode.style.fontWeight = 'medium';
titleNode.style.paddingBottom = '20px';
titleNode.style.color = isDarkMode ? 'white' : 'black';
node.appendChild(titleNode);
const contentNode = document.createElement('div');
contentNode.innerHTML = html;
node.appendChild(contentNode);
node.classList.add('text-black');
node.classList.add('dark:text-white');
node.style.width = `${virtualWidth}px`;
node.style.position = 'absolute';
node.style.left = '-9999px';
node.style.height = 'auto';
node.style.padding = '40px 40px';
console.log(node);
document.body.appendChild(node);
}
// Render to canvas with predefined width
const canvas = await html2canvas(node, {
useCORS: true,
backgroundColor: isDarkMode ? '#000' : '#fff',
scale: 2, // Keep at 1x to avoid unexpected enlargements
width: virtualWidth, // Set fixed virtual screen width
windowWidth: virtualWidth, // Ensure consistent rendering
windowHeight: virtualHeight
});
// Remove hidden node if needed
if (!(html instanceof HTMLElement)) {
document.body.removeChild(node);
}
const imgData = canvas.toDataURL('image/jpeg', 0.7);
// A4 page settings
const pdf = new jsPDF('p', 'mm', 'a4');
const imgWidth = 210; // A4 width in mm
const pageWidthMM = 210; // A4 width in mm
const pageHeight = 297; // A4 height in mm
const pageHeightMM = 297; // A4 height in mm
if (isDarkMode) {
pdf.setFillColor(0, 0, 0);
pdf.rect(0, 0, pageWidthMM, pageHeightMM, 'F'); // black bg
}
// Maintain aspect ratio
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;
let position = 0;
pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
// Handle additional pages
while (heightLeft > 0) {
position -= pageHeight;
pdf.addPage();
if (isDarkMode) {
pdf.setFillColor(0, 0, 0);
pdf.rect(0, 0, pageWidthMM, pageHeightMM, 'F'); // black bg
}
pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
pdf.save(`${note.title}.pdf`);
};
|