HTML to PDF

How to use HTML to PDF

Key features of HTML to PDF

About HTML to PDF

HTML to PDF loads your markup into a hidden, sandboxed frame 794 pixels wide, renders it with html2canvas, and slices the canvas into A4 pages that pdf-lib embeds as JPEG images at 85 percent quality. Pasted code and uploaded files are always portrait; the URL tab adds a landscape choice. In URL mode the page tries to fetch the address directly, then through a public CORS proxy, and reports an error if neither returns HTML rather than producing an empty PDF.

It works well for an invoice or report you have written as HTML with inline styles, for a saved article, or for a quick printable copy of a simple page. Because each page is an image, the text is not selectable and the file is larger than a text PDF. Fetched web pages are rendered without their scripts, and stylesheets or images that use relative paths do not load, so app-like sites and pages behind a login usually do not come out looking like the original.

When to use HTML to PDF

A marketing tool gave you the HTML of an email or a newsletter and someone wants a proof as a PDF. Paste the markup in the Paste HTML Code tab; inline styles, colours and tables render as they would in a browser 794 pixels wide, and the pages come out as pictures of that rendering.

A script or a system produced a report as a .html file on your disk, for example a test result or a lab printout. Use Upload HTML File. Images referenced by a relative path such as chart.png will not be found, because the file is rendered inside this page rather than from its own folder; embed them as data: URLs or point to full https addresses first.

You want an offline copy of a public article in a fixed page format. Enter the address in the Webpage URL tab, pick Portrait or Landscape and A4 or Letter, and convert. Read the note under that tab first: the address may be handed to a public proxy, and pages that build themselves with JavaScript or sit behind a login usually come out incomplete.

When you need selectable text rather than a picture, other tools fit better: plain text through Text to PDF, a Word document through Word to PDF. A PDF made here can be given a text layer afterwards by OCR PDF, and PDF to HTML goes in the opposite direction.

Tips and troubleshooting

• The message Could not retrieve followed by the address means all three attempts failed: a direct fetch, then allorigins.win, then corsproxy.io, each given four seconds. Slow sites fail on the timeout alone. Save the page from your browser as an HTML file and use the Upload HTML File tab instead.
• Orientation and Page Format exist only in the Webpage URL tab. Pasted code and uploaded files are always rendered on portrait A4 pages.
• The HTML is laid out in a frame 794 pixels wide, the width of A4 at 96 dpi, and the body gets a 30 pixel margin unless your HTML sets its own, which leaves 734 pixels for content. Wider content, such as a fixed-width table, widens the picture, and the whole document is then scaled down to the page width, so its text comes out smaller; give containers a width of 100 percent or less.
• Page breaks fall at fixed heights in the rendered picture, so a line of text or an image can be split between two pages. CSS page-break rules are not read.
• The download is named html_document.pdf for pasted code, your file's name with .pdf for an upload, and for a URL the host name with dots replaced by underscores and cut to 25 characters, for example en_wikipedia_org.pdf.
• If an ad blocker or a network filter stops html2canvas from loading from cdnjs.cloudflare.com, the conversion stops with a message saying the page renderer did not load. Allow that host, reload and convert again.
• To go the other way, PDF to HTML turns the text layer of a PDF into a standalone HTML file.

How HTML to PDF works in your browser

Whichever tab you use, the HTML string is loaded into a hidden frame fixed off screen at 794 pixels wide. The frame is sandboxed without permission to run scripts, so no script or event handler in the markup runs, and this site's own styles and dark theme do not reach it. After the frame has loaded (eight seconds at most, if an image or stylesheet is slow) and a short pause for fonts to settle, html2canvas 1.4.1 walks that DOM and paints it onto a canvas at 1.5 times scale. The canvas is cut into slices, each the height of one A4 or Letter page at that width; every slice is encoded as a JPEG at 85 percent quality and embedded by pdf-lib on a new page, scaled to the page width.

In the paste and upload tabs the markup never leaves the tab: File.text() reads an uploaded file in the browser, and apart from Google Analytics while it is switched on, the only requests are the two library scripts from cdnjs.cloudflare.com plus whatever external images or stylesheets your HTML itself references. The URL tab first tries to fetch the address directly, then through allorigins.win, then through corsproxy.io, four seconds each, and uses the first response longer than 100 characters. Those services see the address you typed but not the finished PDF, which is assembled in memory and offered as a Blob.

Frequently asked questions