Infographic Creator

Infographic Creator

Build and design your own professional infographic.

Add Content Blocks

Content Blocks

Choose a Color Theme

Preview & Export

${block.content.text}

`; break; case 'icon-point': blockContent = `
${icons[block.content.icon]}

${block.content.title}

${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(); });
Scroll to Top