How to Convert HTML to PDF
Creating PDFs from HTML is useful for generating invoices, reports, letters, certificates, and any document where you want to control the layout with CSS but distribute as a PDF.
How to convert HTML to PDF
- Paste your HTML — enter your HTML code including any inline CSS or
<style>tags in the editor. The code can include full page structure with headers, tables, images, and styling. - Preview the output — a live preview shows exactly how your PDF will look as you type. Adjust your HTML and CSS until the preview matches what you want.
- Generate and download — click the generate button to create the PDF in your browser, then download it instantly.
What you can create
- Invoices and receipts — structured tables with company branding, line items, and totals
- Reports — formatted documents with headings, paragraphs, charts, and data tables
- Certificates — styled layouts with custom fonts, borders, and centered text
- Letters — professional correspondence with header, body, and signature areas
- Resumes — designed layouts that export as clean PDFs for job applications
Styling tips for PDF output
Use inline styles or <style> tags — external stylesheets are not loaded. Put all your CSS either inline on elements or in a <style> block in the HTML.
Set page margins — use CSS @page { margin: 20mm; } to control the whitespace around your content in the PDF.
Use print-friendly units — mm, cm, and pt are more predictable in PDFs than px or rem. Use mm for margins and spacing that need to match real-world dimensions.
Avoid viewport-dependent layouts — percentage widths and fixed pixel widths work best. Viewport units (vw, vh) may not behave as expected in PDF output.
Tips
- Preview first — always check the live preview before generating. It is much faster to iterate on HTML than to generate a new PDF each time.
- Use base64 for images — convert images to base64 data URIs for guaranteed inclusion in the PDF. External URLs can fail due to CORS restrictions.
- Keep it simple — complex CSS layouts (nested grids, overlapping positioned elements) may not render perfectly. Simpler layouts produce more reliable PDFs.
- Test page breaks — for multi-page documents, use
page-break-before: alwaysto control where new pages start.
Frequently Asked Questions
Does the PDF preserve my CSS styling?
Yes. The converter renders your HTML with CSS styling applied, including colors, fonts, margins, and layout. The PDF looks like the rendered web page, not the raw source code.
Can I include images in the PDF?
Yes. Use base64-encoded images (data URIs) for the most reliable results. External image URLs may work if they are accessible and CORS-enabled.
Is my HTML uploaded to a server?
No. The conversion happens entirely in your browser. Your code and the generated PDF never leave your device.
What CSS features are supported?
Standard CSS including layouts, colors, fonts, backgrounds, borders, and tables are well supported. Advanced features like CSS Grid, complex animations, and some Flexbox edge cases may have limited support.