How to convert an HTML file to PDF
Updated
Contents
To convert an HTML file to PDF, open HTML to PDF, drop your .html or .htm file on the page, choose a page layout if you want one, and press Render PDF. Chromium, the engine behind Chrome and Edge, opens the file on our secure server, runs its scripts and prints it to a PDF whose text you can select and search.
Only the one file goes to our server, and that is the thing to plan for. An image, stylesheet or font the page reaches by a path on your computer, such as css/site.css or images/logo.png, is not there to load. Put the CSS in a <style> block, embed images and fonts as data: URIs, or link them by a full https:// address, which our server does fetch.
If you have HTML code rather than a file, such as an email template or the markup a page builder gave you, save it in a plain-text editor as a file whose name ends in .html, then add that file. To capture a page that is already on the web, give its address to Webpage to PDF instead.
Step by step
- 1Open the HTML to PDF tool and drop one .html or .htm file on the box that says “Add an HTML file, or”, or click browse to choose it.
- 2Read the note under the file name, if one appears. Your browser checks the file for linked files the job will not carry, before anything is sent, and names the first of them.
- 3Under Page layout, pick a Page size (A4, Letter, Legal, A3, or A5), Portrait or Landscape, the Margins, a Screen width, or tick One long page. Left as they are, the page's own print settings decide the layout.
- 4Press Render PDF, which uploads the file over an encrypted connection. The button reads “Uploading your file…”, then “Waiting for our server…” if there is a queue, “Rendering PDF…” while Chromium prints, and “Downloading the result…”.
- 5When “Your PDF is ready.” appears, press the button reading Download and the file name; the PDF is named after your file, ending in .pdf. The link stops working after 60 minutes, so save it right away.
Images, stylesheets and fonts
Our server hands your file to Chromium at an address of its own, and nothing else is served from there. So every reference that resolves beside the file, a relative path such as images/logo.png or a root path such as /img/logo.png, has nothing to load, and comes out as a broken image or an unstyled page. A file: address cannot load at all. The job still succeeds, which is why your browser checks the file first and says what will be missing.
A reference by a full http:// or https:// address to a public site is fetched by our server, so a stylesheet, script or image on a CDN or on your own website can load. A web font linked that way loads when the site serving it allows other sites to use it, as public font services do. Addresses on a private network are not fetched.
Chromium draws text in the fonts the file names. A font embedded in the file as a data: URI is always there. One that is only installed on your computer is not on our server, and Chromium uses a font the server has instead, so lines can wrap differently from what you see on your screen.
JavaScript, and what the page has time to do
Scripts in the file run before the page is printed, within a fixed budget of time, so a chart or table a script builds can appear. A script that fetches a file by a relative path gets nothing, for the same reason a relative image does.
Nothing scrolls the page or clicks on it, so content that waits for a scroll, a click or a long timer is not printed.
Page size, margins and print CSS
Under Page layout: Page size (A4, Letter, Legal, A3, or A5), Orientation, Margins (None, Small, or Normal), Screen width and One long page. Leave Page size on As the page sets it and a CSS @page rule in your file still decides the paper, US Letter when there is none; choose a size, a screen width or One long page and your choice decides it instead. Screen width lays the page out as on a 1280, 768, or 390 pixel wide screen and scales it to fit the paper. One long page prints the whole page on a single page as tall as its content, up to 200 inches; anything longer continues on more pages.
With every option left as it is, each edge gets the Normal margin of 0.4 in, and the file's @media print rules apply, because the page is printed rather than photographed. Our server adds no date, title, file path or page number to the pages; to number them, run the PDF through PDF Header & Footer afterwards.
Save the file as UTF-8 and keep a <meta charset="utf-8"> line in its head. Our server sends the file to Chromium without naming an encoding, so Chromium goes by what the file itself declares.
Common questions
Why are the images or styles missing from my PDF?
Almost always a relative path. Our server receives your one HTML file and nothing else, so src="images/logo.png" or href="style.css" points at a file it never had. Put the CSS in a <style> element, embed images as data: URIs, or link them by a full https:// address, and render again.
Can I convert HTML code without saving it as a file?
No. The tool takes a file, not typed text. Copy the code into a plain-text editor, save it with a name ending in .html, and add that file.
Does JavaScript run before the page is printed?
Yes, within a fixed budget of time, so content a script builds can appear. Content that waits for a click, a scroll or a long timer, or for a file the page links by a relative path, is missing.
Is my HTML file uploaded, and how long is it kept?
Yes, over an encrypted connection, because Chromium runs on our secure server. The file is deleted when the job ends, and within 60 minutes in any case. The download link stops working after 60 minutes.
How large can the HTML file be?
Up to 20 MB, one file per run; a larger one is refused when you pick it, before anything is sent. Images embedded as data: URIs count toward that, and base64 makes each about a third larger than the image file itself.