Poster Design Sheet Generator
Design Controls
Content
${data.location}
${data.subtitle}
${data.title}
${data.body}
`; break; } previewArea.innerHTML = `${data.imageUrl ? imageHtml : ''}${contentHtml}
`;
}
// 7. USA-relevant sample data
function loadSampleData() {
controls.layout.value = 'corporate';
controls.theme.value = 'ocean';
controls.font.value = 'sans';
controls.title.value = "ANNUAL TECH SUMMIT";
controls.subtitle.value = "Innovate & Connect 2025";
controls.body.value = "Join industry leaders, innovators, and professionals for a day of insightful talks, networking, and workshops on the future of technology.";
controls.dateTime.value = "October 21, 2025 | 9:00 AM - 5:00 PM EST";
controls.location.value = "Grand Tech Convention Center, New York, NY";
controls.contact.value = "RSVP at techsummit.com";
controls.imageUrl.value = "https://placehold.co/840x1188/e7f1ff/007bff?text=Tech";
renderPoster();
}
async function handleDownloadPDF() {
controls.pdfDownloadBtn.textContent = "Generating...";
controls.pdfDownloadBtn.disabled = true;
try {
const { jsPDF } = window.jspdf;
container.classList.add("pdsg-pdf-export-mode");
const canvas = await html2canvas(previewArea, { scale: 3, useCORS: true });
container.classList.remove("pdsg-pdf-export-mode");
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF({ orientation: "p", unit: "mm", format: "a4" });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
pdf.save(`${(controls.title.value || "Poster").replace(/ /g, "_")}.pdf`);
} catch (error) {
console.error("PDF Generation Error:", error);
alert("An error occurred while creating the PDF. If using an image, ensure it allows cross-origin requests.");
} finally {
controls.pdfDownloadBtn.textContent = "Download Poster (PDF)";
controls.pdfDownloadBtn.disabled = false;
}
}
// --- Initial Setup & Event Listeners ---
Object.values(controls).forEach(el => {
if (el && el.tagName) { // Ensure it's a DOM element
if(el.tagName === 'SELECT') {
el.addEventListener('change', renderPoster);
} else if (el.tagName !== 'BUTTON') {
el.addEventListener('input', renderPoster);
}
}
});
controls.loadSampleBtn.addEventListener('click', loadSampleData);
controls.pdfDownloadBtn.addEventListener('click', handleDownloadPDF);
// Initial render on load
loadSampleData();
});