Infographic Creator Infographic Creator Build and design your own professional infographic. 1. Content 2. Design 3. Preview & Export Add Content Blocks Main Title Subtitle Content Blocks Add Title Add Text Block Add Icon Point Choose a Color Theme Preview & Export Download Infographic PDF Previous Next ${block.content.text} `; break; } return blockContent; }).join(''); return ` ${infographicData.mainTitle} ${infographicData.subTitle} ${blocksHtml} `; } function renderPreview() { document.getElementById('preview-area').innerHTML = buildPdfHtml(); } // --- PDF GENERATION --- async function generatePdfReport() { downloadPdfBtn.disabled = true; downloadPdfBtn.textContent = 'Generating...'; const pdfTemplate = document.getElementById('pdf-template'); pdfTemplate.innerHTML = buildPdfHtml(); pdfTemplate.classList.remove('invisible'); try { const { jsPDF } = window.jspdf; const canvas = await html2canvas(pdfTemplate.querySelector('.pdf-report-container'), { scale: 3 }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save(`${infographicData.mainTitle.replace(/\s+/g, '_')}_Infographic.pdf`); } catch(e) { console.error('PDF Generation Error:', e); } finally { downloadPdfBtn.disabled = false; downloadPdfBtn.textContent = 'Download Infographic PDF'; pdfTemplate.classList.add('invisible'); } } downloadPdfBtn.addEventListener('click', generatePdfReport); // --- INITIALIZATION --- switchTab(0); renderBlocksEditor(); renderThemeSelector(); });