Print Format Developer Guide

FrapPDFy renders your Jinja2 HTML template against a Frappe document, then pipes it through WeasyPrint or Playwright (Chromium) to produce a PDF. Your template is stored in the Print Format Template doctype as a single HTML string, automatically split into three regions:

A complete template skeleton showing all three regions:

Copy<!-- HEADER — repeats on every page -->
<div class="pdf-header">
  <img src="{{ frappe.utils.get_url(doc.company_logo) }}" height="40">
  <h2>{{ doc.company }}</h2>
</div>

<!-- MAIN CONTENT -->
<div class="pdf-content">
  <h1>{{ doc.name }}</h1>
  <p>Date: {{ doc.posting_date }}</p>

  <table>
    <thead><tr>
      <th>Item</th><th>Qty</th><th>Rate</th><th>Amount</th>
    </tr></thead>
    <tbody>
      {% for row in doc.items %}
      <tr>
        <td>{{ row.item_name }}</td>
        <td>{{ row.qty }}</td>
        <td>{{ row.rate }}</td>
        <td>{{ row.amount }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- FOOTER — repeats on every page -->
<div class="pdf-footer">
  <span>{{ doc.company }} | {{ doc.company_address }}</span>
  <span>Page <span class="page-number"></span> of <span class="total-pages"></span></span>
</div>

Headers and footers repeat on every page. Heights are measured automatically so content is never clipped.

The approach differs depending on which PDF engine you use.

WeasyPrint — CSS Counters

Add these spans in your header or footer, then define the CSS:

Copy<!-- HTML -->
<span>Page <span class="page-number"></span> of <span class="total-pages"></span></span>

Copy/* Custom CSS field */
.page-number::before {
    content: counter(page);
}
.total-pages::before {
    content: counter(pages);
}

Playwright — Chromium Template Classes

Use special classes inside header/footer templates:

Copy<span class="pageNumber"></span>   <!-- current page -->
<span class="totalPages"></span>   <!-- total pages -->

These utility classes are pre-defined by the engine — do not redefine them in Custom CSS.

Copy<!-- Force a page break AFTER this element -->
<div class="page-break"></div>

<!-- Prevent this block from splitting across pages -->
<div class="no-break">
  ... keep this section together on one page ...
</div>

Always convert image paths to absolute URLs — both engines fetch images over HTTP and cannot resolve relative paths.

Copy<!-- From an Attach field on the document -->
<img src="{{ frappe.utils.get_url(doc.company_logo) }}" height="50">

<!-- From a hardcoded file path -->
<img src="{{ frappe.utils.get_url('/files/letterhead.png') }}" height="80">

Use the web_block helper to render an e-Invoice QR code from a registered Web Template.

Copy<!-- Render the QR code block -->
{{ web_block('e-Invoice QR', values={'e_invoice_qr_text': e_invoice_log.signed_qr_code}) }}

Copy/* Size the QR image via Custom CSS */
.qrcode {
    width: 90px;
    height: 90px;
}

Frappe stores rich text (Long Text with editor) as HTML with Quill editor classes. Override default Quill padding to avoid unwanted spacing in your PDF.

Copy/* Add to Custom CSS */
.ql-editor {
    padding: 0;
    margin: 0;
}

Copy<!-- Render a rich text field — it's already HTML -->
<div class="ql-editor">{{ doc.terms_and_conditions }}</div>

All custom CSS goes in the Custom CSS field of the Print Format Template. Page size and orientation are set via the doctype fields — not CSS.

Copy/* Universal reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Tables */
table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

/* Prevent table rows splitting across pages */
tr {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Remove Quill editor default padding */
.ql-editor {
    padding: 0;
    margin: 0;
}

/* Page number counters (WeasyPrint) */
.page-number::before { content: counter(page); }
.total-pages::before { content: counter(pages); }

/* QR code size */
.qrcode { width: 90px; height: 90px; }

Page Size & Orientation Fields

Print multiple copies (e.g. Original, Duplicate, Triplicate) in one PDF, each with different labels.

Step 1 — Set fields in Print Format Template

Step 2 — Copy Values JSON

Copy[
  { ".copy-label": "Original" },
  { ".copy-label": "Duplicate" },
  { ".copy-label": "Triplicate" }
]

Step 3 — Template placeholder

Copy<div class="pdf-header">
  <span class="copy-label"></span>   <!-- filled per copy -->
  <h2>Tax Invoice</h2>
</div>

Selector Syntax

Choose the right engine for your template's requirements.

A cheat-sheet for everyday use: