// Method to export help content to PDF exportToPDF(): void { const doc = new jsPDF('p', 'mm', 'a4'); const margin = 10; const pageWidth = 210; const pageHeight = 295; const addContentToPDF = (content: string) => { const tempContainer = document.createElement('div'); tempContainer.style.position = 'absolute'; tempContainer.style.left = '-9999px'; tempContainer.style.fontSize = '14px'; // Set default font size tempContainer.innerHTML = content; document.body.appendChild(tempContainer); html2canvas(tempContainer, { scale: 2, // Increase scale for better quality useCORS: true, logging: true }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const imgWidth = pageWidth - 2 * margin; const imgHeight = canvas.height * imgWidth / canvas.width; let heightLeft = imgHeight; let position = 0; doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight); heightLeft -= pageHeight; while (heightLeft > 0) { doc.addPage(); position = heightLeft - imgHeight; doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight); heightLeft -= pageHeight; } document.body.removeChild(tempContainer); doc.save('help-guide.pdf'); }).catch(err => { console.error('Error capturing content:', err); document.body.removeChild(tempContainer); }); }; const chunkSize = 5; for (let i = 0; i < this.filteredContent.length; i += chunkSize) { const chunk = this.filteredContent.slice(i, i + chunkSize); const chunkContent = chunk.map(item => ` <h5 style="font-size: 16px;">${item.title}</h5> <div style="font-size: 14px;">${item.content}</div> `).join(''); addContentToPDF(chunkContent); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter