Reviewed by Sohail Anwar · Software Engineer, 12 years of software development experience
🖨️ Client‑Side DOM to PDF Renderer

DOM to PDF Converter

Paste or upload HTML markup — the tool renders it in a live browser sandbox, rasterizes the layout with html2canvas, and composes a paginated PDF with jsPDF. Configure page size, orientation, scale, and margins before downloading.

🔒 100% Client-Side – HTML rendering and PDF generation run entirely in your browser sandbox.
0 characters
Live Preview Paste or upload HTML to preview

DOM to PDF Converter Technical Reference

This tool converts HTML markup into PDF documents using a two-stage pipeline: the DOM tree is first rendered in a live browser sandbox, then rasterized to a bitmap canvas, and finally composed into a paginated PDF using vector-preserving page layout. No server-side headless Chrome or Puppeteer is required.

Rendering Pipeline

  • Stage 1 — DOM Sandboxing: The HTML string is written into a hidden <iframe> via srcdoc, giving it a fully isolated browsing context with its own document, CSS cascade, and inline <style> resolution.
  • Stage 2 — Canvas Rasterization (html2canvas): html2canvas traverses the iframe's rendered DOM, reads computed CSS styles (including transforms, gradients, borders, and box shadows), and paints each element onto an HTML5 <canvas>. The scale factor (1×, 2×, 3×) controls pixel density for sharpness.
  • Stage 3 — PDF Composition (jsPDF): The canvas bitmap is exported as a PNG and embedded into a jsPDF document. For content taller than one page, the canvas is sliced into page-height segments and each segment is placed on a successive page.

Configuration Options

  • Page Size: A4 (210 × 297 mm), Letter (216 × 279 mm), Legal (216 × 356 mm), A3 (297 × 420 mm).
  • Orientation: Portrait (tall) or Landscape (wide). Affects usable page width for content scaling.
  • Canvas Scale: Higher scale values (2×, 3×) produce crisper text and images at the cost of longer render times and larger PDF size.
  • Margin: Uniform margin in millimetres applied to all four sides of every page.

Known Limitations

  • External fonts & images: Resources loaded from external domains may be blocked by CORS policy. Inline Base64 images and system fonts render reliably; Google Fonts and CDN-hosted images may not.
  • CSS media queries: html2canvas evaluates screen styles, not @media print rules. Add print-specific styles inside your HTML using <style>@media print { ... }</style>.
  • JavaScript inside the HTML: Scripts inside the rendered iframe are sandboxed and may not execute. Interactive components are captured in their initial rendered state.

Frequently Asked Questions

Can I convert a full webpage with navigation and sidebars?

Yes, paste the complete HTML source. For print-optimised output, wrap only your content area in a clean <div> with explicit widths and remove navigation elements before converting.

How are multi-page documents handled?

The full rendered height of the HTML is measured. If it exceeds the printable page height, the canvas is split into sequential slices and each slice is placed on a new PDF page with the configured margin.

Are inline SVGs and CSS gradients supported?

Yes. html2canvas renders inline SVG elements and CSS gradients (linear-gradient, radial-gradient) natively as canvas paths. Complex SVG animations are captured in their static initial frame.

Is private or confidential HTML kept secure?

Yes. HTML rendering, canvas rasterization, and PDF binary generation all execute inside your browser's local sandbox via html2canvas and jsPDF. No markup, pixels, or file bytes are transmitted to any server.