HTML PDF Export

The pattern: build two versions of the document in one HTML file — a rich web version for the screen, and a separate hidden print-only section purpose-built for A4. window.print() does the rest.

Why not html2canvas/html2pdf? Canvas capture scrambles complex CSS layouts, mishandles fonts, and can't reliably detect page breaks. Browser print is far more reliable when the print HTML is purpose-built for it.

File structure

<style>
  /* Screen styles — full design, no restrictions */
  ...

  /* Print: hide web, show print section */
  #print-report { display: none; }

  @media print {
    @page { size: A4; margin: 0; }
    .web-page, .export-btn { display: none !important; }
    #print-report { display: block !important; }

    /* Page container — one per PDF page */
    .pp {
      width: 210mm;
      min-height: 297mm;
      page-break-after: always;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      color-adjust: exact;
      font-family: 'Barlow', sans-serif;  /* or whatever web font is loaded */
    }
    .pp:last-child { page-break-after: auto; }

    /* All colored elements need print-color-adjust */
    .pp-dark-header, .pp-card-header, .pp-footer {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
</style>

<!-- Web design (hidden in print) -->
<div class="web-page"> ... </div>

<!-- Print-only report (hidden on screen) -->
<div id="print-report">
  <div class="pp"> <!-- Page 1 --> </div>
  <div class="pp"> <!-- Page 2 --> </div>
  <div class="pp"> <!-- Page 3 --> </div>
</div>

Critical rules

1. Every .pp div = one A4 page. Design content to fit. Don't rely on the browser to split content mid-card.
2. print-color-adjust: exact on EVERY element with a background color, not just the page container. Dark headers, colored cards, tinted boxes — all need it, or Chrome strips the color.
3. Font sizes in px, not mm/pt. The browser handles A4 scaling. Use ~9-11px for body, ~12-14px for headings at print scale.
4. Padding in mm for page-level spacing (e.g., padding: 12mm 14mm), px for component internals.
5. No border-radius issues — border-radius works fine in Chrome print. Box shadows do not render — remove them from print styles.
6. Google Fonts work — they're already loaded in the browser, so they render correctly in print. No fallback needed.

Export button

<button onclick="window.print()">Export PDF</button>

That's it. No libraries. In Chrome, "Save as PDF" → destination = "Save as PDF", margins = None.

Sizing guide (A4 = 210mm × 297mm)

With padding: 12mm 14mm:

• Content width: 182mm
• Content height: 273mm

Typical 3-page split for a proposal:

• Page 1: Cover/intro (header + stats + 1 section)
• Page 2: Main content (2-3 option cards)
• Page 3: Supporting content + footer

Asset

See assets/template.html for a minimal two-page starter with dark header, stats bar, card, and footer — all print-ready.