HTML to PDF: Best Practices for Perfect Conversions

Converting HTML to PDF is a powerful way to generate documents like invoices, reports, and certificates directly from web content. However, getting the PDF to look exactly like your web page can sometimes be tricky.

This guide covers best practices and tips to ensure your HTML converts to PDF perfectly every time using our HTML to PDF Converter.

1. Structure Your HTML for Print

PDFs are static documents with fixed page sizes (usually A4 or Letter), unlike web pages which are continuous and responsive.

Use Fixed Widths

While responsive design is great for the web, for PDFs it’s often better to use a fixed width container that matches your target page size.

• A4 Width: ~794px (at 96 DPI)
• Letter Width: ~816px (at 96 DPI)

<!-- Example container for A4 PDF -->
<div style="width: 700px; margin: 0 auto; padding: 20px;">
  <!-- Your content here -->
</div>

Avoid Complex Layouts

Simple layouts translate best to PDF.

• Preferred: Standard block elements (div, p, h1-h6), Tables for tabular data.
• Avoid: Complex CSS Grid or Flexbox layouts if possible, as they can sometimes render unpredictably depending on the conversion engine.
• Avoid: position: fixed or position: absolute unless necessary, as they might float over other content.

2. Styling Tips for PDF

Use Inline Styles or Internal CSS

For the most reliable results, especially when copying code into a converter tool, use inline styles or a <style> block within your HTML. External stylesheets might not load if they are blocked by CORS policies or network issues.

<div style="font-family: Arial, sans-serif; color: #333;">
  <h1 style="border-bottom: 2px solid #0066cc;">Invoice #12345</h1>
</div>

Fonts and Typography

• Use Standard Fonts: Fonts like Arial, Helvetica, Times New Roman, and Courier are safe bets.
• Web Fonts: If you use Google Fonts, make sure to @import them in your style block, but be aware that they might increase generation time or fail if the network request is blocked.

Images

• High Resolution: Use high-resolution images and scale them down with CSS (e.g., width: 100%) to ensure they look crisp in the PDF.
• Cross-Origin (CORS): If your images are hosted on a different domain, ensure that server allows Cross-Origin requests. Otherwise, the converter might render a blank space.
• Base64: Embedding images as Base64 strings is the most reliable way to ensure they appear in the PDF.

3. Common Use Cases

Invoices

For invoices, tables are your best friend. They naturally handle rows of data and keep alignment perfect.

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f0f0f0;">
      <th style="padding: 10px; text-align: left;">Item</th>
      <th style="padding: 10px; text-align: right;">Cost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 10px; border-bottom: 1px solid #ddd;">Web Design Service</td>
      <td style="padding: 10px; border-bottom: 1px solid #ddd; text-align: right;">$500.00</td>
    </tr>
  </tbody>
</table>

Reports

For text-heavy reports:

• Use generous line-height (1.5 or 1.6) for readability.
• Add page breaks logic if you are coding a custom solution, or simply ensure your content flows naturally.
• Use headers and footers to repeat information like page numbers or document titles (though this often requires specific tool support).

4. Troubleshooting Common Issues

Content is Cut Off

This usually happens if a container has overflow: hidden or a fixed height that is smaller than its content.

• Fix: Remove overflow properties and let containers grow naturally with their content.

Blurry Text or Images

This is often due to low resolution rendering.

• Fix: Our tool automatically scales up the content (2x) before capturing to ensure crisp text. Ensure your source images are high enough resolution.

Background Colors Missing

By default, browsers often don’t print background colors to save ink.

• Fix: Use the CSS property -webkit-print-color-adjust: exact; or print-color-adjust: exact; in your styles.

.header {
  background-color: #0066cc;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}