Table of Contents

Toggle

HTML to PDF Converter

Enter Your HTML

Clear Code Load Sample

PDF Preview

Download PDF

The preview shows how your HTML will render in the PDF

How to Use This Tool

1

Enter HTML

Type or paste your HTML code into the input area. You can use the sample button to load example HTML code.

2

Preview

See how your HTML will render in the preview area. The preview updates automatically as you type.

3

Download

Click the download button to generate and save your PDF file. It’s that simple!

Supported HTML Features

This converter supports most HTML elements including:

• Text formatting
• Images
• Tables
• Lists
• Links
• Basic CSS styles
• Divs and sections
• Headings

`; // Load sample HTML sampleBtn.addEventListener('click', () => { htmlInput.value = sampleHTML; updatePreview(); }); // Clear HTML clearBtn.addEventListener('click', () => { htmlInput.value = ''; updatePreview(); }); // Update preview as user types htmlInput.addEventListener('input', updatePreview); // Update preview function function updatePreview() { const html = htmlInput.value.trim(); if (html) { try { const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document; previewDoc.open(); previewDoc.write(html); previewDoc.close(); } catch (e) { console.error("Error updating preview:", e); } } else { const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document; previewDoc.open(); previewDoc.write('

Your PDF preview will appear here

'); previewDoc.close(); } } // Download PDF downloadBtn.addEventListener('click', generatePDF); function generatePDF() { const html = htmlInput.value.trim(); if (!html) { alert('Please enter some HTML code before generating a PDF.'); return; } try { // Create a temporary container for the HTML const tempDiv = document.createElement('div'); tempDiv.innerHTML = html; document.body.appendChild(tempDiv); // Use html2canvas and jsPDF html2canvas(tempDiv).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF('p', 'mm', 'a4'); const imgWidth = 210; // A4 width in mm const pageHeight = 297; // A4 height in mm const imgHeight = canvas.height * imgWidth / canvas.width; let heightLeft = imgHeight; let position = 0; pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; // Add additional pages if needed while (heightLeft >= 0) { position = heightLeft - imgHeight; pdf.addPage(); pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); heightLeft -= pageHeight; } // Save the PDF pdf.save('html-document.pdf'); // Clean up document.body.removeChild(tempDiv); }); } catch (error) { console.error("Error generating PDF:", error); alert("An error occurred while generating the PDF. Please check your HTML code."); } } // Theme toggle themeToggle.addEventListener('click', () => { document.body.classList.toggle('bg-gray-900'); document.body.classList.toggle('bg-gray-50'); const isDark = document.body.classList.contains('bg-gray-900'); // Toggle icons moonIcon.classList.toggle('hidden', !isDark); sunIcon.classList.toggle('hidden', isDark); // Update theme text themeToggle.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode'); }); // Documentation toggle docsToggle.addEventListener('click', () => { docsContent.classList.toggle('expanded'); docsChevron.classList.toggle('rotate-180'); }); // Initialize preview updatePreview(); // Load sample HTML on first visit setTimeout(() => { if (!htmlInput.value) { htmlInput.value = sampleHTML; updatePreview(); } }, 1000);