HTML to PDF
Render HTML in your browser, preview it, then download the result as a PDF.
Back to all tools on ToolForge
Upload HTML File
You can upload an HTML file or paste HTML below.
Preview
About HTML to PDF
This HTML to PDF tool renders your HTML in the browser and exports the preview as a downloadable PDF. It is useful for simple invoices, formatted snippets, printable notes and quick HTML document exports.
HTML to PDF Conversion Process
// Step 1: Parse and sanitize HTML
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
// Remove: script, iframe, object, embed, event handlers
// Step 2: Render to canvas (html2canvas)
const canvas = await html2canvas(element, {
scale: 2, // Retina quality
backgroundColor: "#ffffff"
});
// Step 3: Convert to PDF (jsPDF)
const pdf = new jsPDF("p", "pt", "a4");
pdf.addImage(canvas.toDataURL("image/png"), ...);
pdf.save("document.pdf");
Supported HTML Elements
| Element | Support |
|---|---|
| Headings, Paragraphs | Full |
| Lists (ul, ol, li) | Full |
| Tables | Full |
| Images | Same-origin/CORS |
| CSS Styles | Inline/embedded |
Frequently Asked Questions
- How does HTML to PDF conversion work?
- HTML to PDF conversion renders the HTML content in the browser, captures it as a canvas using html2canvas, then converts the canvas image to a PDF using jsPDF. The process preserves visual styling, layout, and formatting as they appear in the browser preview.
- What HTML elements are supported?
- Most standard HTML elements are supported: headings, paragraphs, lists, tables, images, links, and CSS styling. For safety, scripts, iframes, objects, embeds, and event handlers (onclick, onerror, etc.) are removed during sanitization to prevent XSS attacks.
- How do I convert HTML to PDF?
- Paste HTML content in the editor or upload an .html file, click 'Render Preview' to see the formatted output with sanitization applied, then click 'Download PDF'. The tool uses html2canvas to capture the preview and jsPDF to generate a downloadable PDF file.
- Why is my CSS not rendering correctly?
- External stylesheets and @import rules may not load due to CORS restrictions. Use inline styles or embedded <style> tags for best results. Complex layouts, flexbox, and grid may have limited support. For complex documents, consider server-side PDF generators.