HTML to PDF Converter
HTML to PDF Converter
PDF Settings
Values in millimetres (mm)
Higher scale = crisper text but larger file size. Default 2x is recommended.
No HTML yet
Paste your HTML code or upload a .html file on the left, then click Generate & Download PDF.
100% Private — Runs in Your Browser
Your HTML content is never uploaded to any server. All processing happens locally in your browser. No data is stored or transmitted.
Paste HTML or upload a file and download a PDF in seconds — no sign-up, no server upload
Converting HTML to PDF is one of the most common document-generation tasks for developers, designers, business owners, and everyday users. Whether you need to generate an invoice, save a web page layout, archive a report, or share a certificate, a clean PDF is the universal format that preserves your formatting across every device and operating system. Our HTML to PDF Converter runs entirely in your browser. Nothing is uploaded to any server. Your HTML is processed by html2pdf.js — a powerful JavaScript library that combines html2canvas (which renders your HTML visually) and jsPDF (which encodes the rendered canvas into a PDF document). The result is a pixel-accurate PDF that preserves your fonts, colors, tables, images, and layout exactly as styled in your HTML. You can interact with the tool in two ways. First, you can paste your HTML code directly into the built-in editor. The editor uses a monospace font for readability and updates a live preview panel with a 500 ms debounce so you can see your HTML rendered in real time before committing to a PDF. Second, you can upload an existing .html or .htm file by clicking the upload zone or dragging and dropping a file directly onto it — the file is read locally and its contents are placed in the editor automatically. To help you get started quickly, the tool includes a library of ready-to-use HTML templates: Invoice, Resume, Report, Receipt, Certificate, and Meeting Agenda. Simply choose a template from the dropdown and the editor is pre-filled with professional-quality HTML that you can customise before generating your PDF. The converter gives you full control over PDF settings. Choose from five page formats — A3, A4, A5, Letter, and Legal — and toggle between portrait and landscape orientation. Margins can be set using convenient presets (None, Small, Normal, Large) or entered as custom millimetre values for all four sides independently. Image quality is configurable via Low, Medium, and High presets that adjust both the JPEG compression level and the html2canvas rendering scale, giving you a balance between file size and visual fidelity. A scale slider lets you further fine-tune the rendering resolution. Additional options include a grayscale toggle (renders the document without colour), a no-background toggle (forces a white page background, useful for pages with dark theme CSS), and a use-print-stylesheet toggle (applies print-media-query-friendly CSS before conversion, hiding on-screen navigation and buttons). You can also insert CSS page break markers directly into your HTML with a single button click. Once generated, the PDF downloads automatically to your device. A summary card displays the filename, estimated file size, page format, orientation, quality setting, and estimated page count so you know exactly what was produced. You can re-download the same configuration at any time with a single click. Because everything runs in your browser, your HTML content is completely private. It never leaves your device. This makes the tool safe for sensitive documents — financial records, personal resumes, confidential reports — without any risk of your data being stored or accessed by a third party.
Understanding HTML to PDF Conversion
What Is HTML to PDF Conversion?
HTML to PDF conversion is the process of rendering an HTML document — including all its CSS styles, images, and layout — as a static, portable PDF file. HTML describes content and styling for web browsers, while PDF (Portable Document Format) is a fixed-layout format designed for printing and sharing. Converting between them preserves the visual appearance of the page in a universally readable format. Client-side HTML-to-PDF conversion works by rendering the HTML on a canvas element, then encoding that canvas as a PDF — no server, no internet connection, and no software installation required.
How Does the Conversion Work?
This tool uses html2pdf.js, which chains two libraries. First, html2canvas renders the HTML string into an HTML5 Canvas element — essentially taking a screenshot of the page at the specified scale. Second, jsPDF encodes that canvas image as a JPEG (or PNG) inside a PDF document structure. The result is embedded as a single image per page within the PDF. Margins, page format, and orientation are applied by jsPDF during the layout step. Page breaks are handled by html2pdf.js using CSS page-break properties and the 'avoid-all' heuristic, which tries to prevent images and block elements from being split across pages.
Why Does PDF Format Matter?
PDF is the de-facto standard for sharing formatted documents because it looks identical on every device, operating system, and printer. Unlike HTML (which depends on the viewer's browser and CSS support) or Word documents (which reflow differently between versions), a PDF is frozen at the moment of creation. This makes it ideal for invoices, contracts, certificates, reports, and any document where precise layout matters. PDFs are also widely accepted by email clients, cloud storage services, and government portals, making them the safest format for professional document exchange.
Limitations to Know
Because html2canvas renders HTML by taking a screenshot, there are some inherent limitations. JavaScript-dependent content (carousels, dynamic data, React-rendered components) may not render correctly since the HTML string is parsed statically. External stylesheets loaded via CDN links may fail to apply if the CDN does not permit cross-origin access from the browser. Web fonts loaded via @font-face may also not render if the font files are blocked. Complex CSS Grid or Flexbox layouts generally render well, but very advanced CSS features may differ slightly from browser rendering. For best results, use inline styles or embedded <style> tags and base64-encoded images.
How to Convert HTML to PDF
Enter or upload your HTML
Switch to 'Paste HTML' and type or paste your HTML code into the editor, or switch to 'Upload File' and drag your .html file onto the upload zone. You can also choose a ready-made template from the dropdown to get started instantly.
Review the live preview
The preview panel on the right updates automatically as you type (with a 500 ms delay). Check that your layout, fonts, and images look correct. Click 'New tab' to open the rendered HTML in a full browser window for a closer inspection.
Configure PDF settings
Choose your page format (A4, Letter, etc.), orientation (portrait or landscape), margins, image quality, and render scale. Enable grayscale or the print stylesheet toggle if needed. Enter a custom filename for your download.
Click Generate & Download PDF
Press the Generate & Download PDF button. The conversion runs entirely in your browser — no upload, no waiting. Your PDF downloads automatically within a few seconds and a summary card shows the file size, format, and other details.
Frequently Asked Questions
What CSS is supported in the PDF output?
The converter supports most CSS2 and CSS3 properties including Flexbox, Grid, custom fonts via inline @font-face, colors, backgrounds, borders, box shadows, and media queries. However, because html2canvas renders a visual screenshot rather than a true browser layout engine, some advanced CSS features may differ slightly from what you see in your browser. For the most reliable output, use inline styles or embedded <style> tags within your HTML. Avoid referencing external stylesheets that may be blocked by CORS policies. CSS page-break-before, page-break-after, and the modern break-before / break-after properties are supported for controlling pagination.
Does JavaScript in my HTML run during conversion?
No. The HTML is passed as a static string to html2canvas, which renders it without executing JavaScript. This means React components, Vue apps, Angular templates, and any content generated by client-side JavaScript will not be rendered. Dynamic elements such as charts built by charting libraries, content loaded via fetch(), or interactive widgets will appear as they would without JavaScript. To include dynamic content, render it first in your browser, copy the resulting HTML (using browser DevTools), and paste that static HTML snapshot into the converter.
Can I embed web fonts or custom fonts?
Yes, with some caveats. Web fonts loaded via a CDN (e.g., Google Fonts) should work if the CDN allows cross-origin access — most do. To guarantee fonts render correctly, embed the font directly using a base64-encoded @font-face rule inside a <style> tag in your HTML. This eliminates any dependency on network access or CORS headers. System fonts (Arial, Georgia, Times New Roman, etc.) always work reliably. If a custom font fails to load, html2canvas will fall back to the browser's default serif or sans-serif font.
How does multi-page output work?
html2pdf.js automatically splits long HTML content across multiple PDF pages. It uses the configured page format (A4, Letter, etc.) and margins to determine how much content fits on each page. You can influence pagination using standard CSS properties: page-break-before: always or break-before: page on any block element will force a new page before that element. The 'Insert page break' button in the editor inserts a <div> with these properties at the end of your current HTML. For very long documents, the 'avoid-all' mode prevents images and other block elements from being cut in the middle of a page break.
Is my HTML content private and secure?
Completely. This tool runs 100% in your browser using JavaScript. Your HTML is never sent to any server, never stored in a database, and never seen by anyone other than you. All processing — HTML rendering, canvas generation, and PDF encoding — happens locally using the html2pdf.js library. You can verify this by inspecting the network tab in your browser's developer tools while using the tool: you will see no outbound requests carrying your content. This makes the tool safe for sensitive documents including financial records, personal resumes, confidential contracts, and medical documents.
How do I embed images in my HTML for the PDF?
There are two reliable ways to include images. First, use base64-encoded data URIs: convert your image to base64 and embed it directly as <img src="data:image/png;base64,...">. This works offline and requires no network access. Second, use publicly accessible image URLs from servers that allow cross-origin requests (CORS-permissive). The converter sets useCORS: true in html2canvas, which enables loading of CORS-compliant external images. Avoid hotlinking images from servers that block CORS (many do), as they will appear as broken images in the PDF. For best results with logos and diagrams, convert them to base64 first.