Sometimes the page you need to share exists only as markup: an .html file saved from a report, an email template, or a snippet from your editor. Kwebby's HTML to PDF tool takes that file, or HTML code you paste, shows a preview and saves a PDF through your browser's print dialog. Nothing is uploaded. This guide covers what prints well, what does not (images stored next to your file, scripts, background colors) and the few lines of CSS that give you control over the page. More free PDF tools are a click away. If you have a web address instead of a file, use URL to PDF.
Key Takeaways
- Kwebby's HTML to PDF tool accepts an .html or .htm file, or HTML pasted into a text box, and shows a preview before you convert.
- Click Convert to PDF, set Destination to Save as PDF in your browser's print dialog and click Save. Your browser makes the PDF, so your HTML is not uploaded.
- Inline styles and style tags apply. Images that sit beside your file on your computer do not load, so embed them as data URIs or use full web addresses.
- Neither the preview nor the printed copy runs scripts, so a page built by JavaScript prints without that content. Save it as static HTML first.
- Add @page and print CSS to your HTML to set the paper size, margins, backgrounds and page breaks.
- The tool takes files and code only. For a live web address, use URL to PDF.
What Is the Kwebby HTML to PDF Tool?
Kwebby's HTML to PDF tool is a free, browser-based converter that turns an .html or .htm file, or HTML code you paste, into a PDF. It shows a preview, then opens your browser's print dialog, where you choose Save as PDF. Your HTML is read on your device and is not uploaded to a server.
The PDF is made by your browser's print engine, so the result looks like the page would if you printed it from that browser. Paper size, margins and headers are set in the print dialog or in your own CSS.
Key Features and How It Works
Two Ways to Add HTML
The tool has two tabs. Upload HTML File shows a drop zone that reads "Drop .html file here or click to browse" and accepts .html and .htm files, one file at a time. Paste HTML Code shows a text box where you type or paste markup. Switching between the tabs clears whatever you loaded, so choose one first.
A Preview Before You Convert
As soon as a file is loaded, or the text box has code in it, a "Ready" line appears with the file name (pasted code is named pasted.html), along with an HTML Preview panel. The preview shows your page on screen. It does not run scripts.
The Print Step
When you click Convert to PDF, the tool puts your HTML into a hidden frame, waits about 0.3 seconds and opens your browser's print dialog. In the dialog you set Destination to Save as PDF, check the paper size and margins, and click Save.
Files Are Read as UTF-8
The tool reads your file as text, using UTF-8. A file saved in an older encoding can show odd characters in place of accents or symbols. Save your HTML as UTF-8 first.
What Carries Over
Headings, paragraphs, lists and tables carry over. So do styles written in style attributes or <style> tags, images embedded as data URIs and images on full web addresses that the browser can load. Browsers usually keep hyperlinks clickable in the saved PDF, so check yours.
Why Convert HTML to PDF
A PDF looks the same on every device and opens without a browser, which makes it a safer format to send than loose HTML.
- Email and attachments: a PDF opens the same way in every mail app, while an HTML file may not.
- Reports and invoices: turn a page generated by your own code into a document clients can keep.
- Documentation: hand a saved help page to people who prefer files.
- Archiving: keep a snapshot that does not change when the source does.
- Submissions: meet a portal that only accepts PDF.
How to Use the HTML to PDF Tool
You need an .html or .htm file, or some HTML code. The steps take about a minute.
- Choose Upload HTML File or Paste HTML Code.
- Click the drop zone or drag your file onto it, or paste your code into the text box. A "Ready" line appears.
- Look at the HTML Preview to confirm the right content loaded.
- Click Convert to PDF. Your browser opens the print dialog.
- Set Destination to Save as PDF, check paper size and margins, and click Save.
- Open the PDF and check the page breaks, images and links.
Best Practices for HTML to PDF Conversion
Embed Images or Use Full Web Addresses
The tool reads your file as text, so it cannot see the folder next to it. An image written as images/logo.png has nowhere to load from. Use a full https:// address, or embed the image as a data URI inside the HTML. A data URI travels with the code and is available at once. Images on other sites are requested by your browser when the page is printed, and the tool waits for the page and its images to finish loading before it opens the print dialog. If a resource takes more than about 8 seconds, the dialog opens without it.
Put Your Styles Inside the HTML
Styles in style attributes and <style> tags apply. A stylesheet linked by a relative path, such as style.css, will not load. One linked by a full address loads only if your browser can reach it. For a file you plan to convert often, paste the CSS into a <style> tag.
Set Paper Size and Margins With @page
Add a rule such as @page { size: A4; margin: 15mm; } to your HTML. MDN describes the @page rule as the way to change the dimensions, orientation and margins of printed pages. Check the print dialog's preview to confirm your browser applied it.
Keep Backgrounds With print-color-adjust
By default, a browser may drop backgrounds when it prints. MDN's print-color-adjust page says the default is economy, so dark or very dense background images might be removed. Add print-color-adjust: exact; to elements whose colors matter, such as table header rows. Your print dialog may also have a background graphics option.
Control Page Breaks
Add break-inside: avoid; to table rows, figures and cards so they do not split across two pages. Add break-before: page; to a heading to start a new page.
Use a Print Stylesheet
The preview shows your screen styles, while the PDF uses your print styles. Wrap print-only rules in @media print { } to hide menus, buttons and sidebars. Paper is narrower than most screens, so a responsive layout can switch to its narrow version on paper.
Avoid Scripts and Untrusted Code
The preview and the hidden frame used for printing both run in a sandbox that blocks scripts, inline event handlers and form submissions, so pasted code cannot act on the Kwebby page. The flip side is that content built by JavaScript does not appear in the PDF. Save the finished page as static HTML first, for example from your browser's developer tools.
Finish With the Other PDF Tools
Join several saved pages with Merge PDF, shrink the result with Compress PDF or turn pages upright with Rotate PDF.
Common Use Cases
- Invoices and receipts: save a billing page your system generated.
- Email templates: check how a template reads as a fixed page.
- Developer documentation: turn a README or help page into a PDF for a client.
- Reports from code: test a report layout without a PDF library.
- Saved web pages: convert a page you stored as an .html file.
- Content from a CMS: paste an exported article to share it as a file.
Related Kwebby Tools
- URL to PDF takes a live web address instead of a file.
- PDF to HTML goes the other way.
- Merge PDF joins several PDFs into one file.
- Split PDF extracts the pages you need.
- Rotate PDF turns pages upright.
- Compress PDF rewrites the file structure. Savings vary with the content.
- Word to PDF uses the same print dialog method for documents.
Frequently Asked Questions (FAQs)
How do I convert HTML to PDF?
Open Kwebby's HTML to PDF tool, add an .html file or paste your code, and check the preview. Click Convert to PDF, set Destination to Save as PDF in the print dialog and click Save.
Can I paste HTML code instead of uploading a file?
Yes. Open the Paste HTML Code tab and paste your markup into the text box. The preview and Convert to PDF button appear as soon as the box has text. Switching tabs clears the box, so stay on one tab until you finish.
Why are my images or styles missing from the PDF?
Most often they are stored as relative paths, such as images/logo.png or style.css. The tool reads your file as text and cannot reach other files on your computer. Embed images as data URIs, link them with full web addresses, and put CSS in a <style> tag.
Does the tool run JavaScript?
No. The preview and the print frame both block scripts, so the PDF matches the preview. Content that JavaScript would build does not appear, so save such pages as static HTML first.
Can I convert a web page address to PDF?
Not with this tool, which takes files and code only. Use Kwebby's URL to PDF tool for a live web address, or save the page as an .html file and add it here.
Is the Kwebby HTML to PDF tool free, and is my HTML uploaded?
The tool is free to use, with no account or payment. It reads your HTML in your browser and does not send it to a server. If your HTML points to images, fonts or styles on other websites, your browser requests those from their hosts.
Final Thoughts
An HTML to PDF conversion works best when the markup carries everything it needs. Kwebby's HTML to PDF tool gives you a preview and your browser's own print engine, with no upload. Embed your images, keep styles inside the file, add a few lines of print CSS and use static HTML. Then merge, compress or rotate the result with the other PDF tools.