How to Multi Page PDF Templates

Complex documents — multi-page invoices, catalog booklets, reports with cover pages and appendices — require templates that handle pagination, repeating headers, dynamic page counts, and content that flows naturally across page breaks. SublimePDF renders multi-page PDFs from a single HTML template, letting CSS and content length determine the page count dynamically.

Follow the step-by-step instructions below, then use the free tool directly — no registration or download required.

Open Tool →

How to Multi Page PDF Templates — Step by Step

1

Structure your template with semantic sections

Organize your HTML into distinct sections: cover page, table of contents, body content, and appendices. Use <section> or <div> elements with descriptive classes (class='cover-page', class='report-body') to logically separate each part.

2

Force page breaks between sections

Apply break-before: page or break-after: page in CSS to start each major section on a new page. Example: .cover-page { break-after: page; } ensures the content after the cover starts on page two.

3

Prevent orphaned content

Use break-inside: avoid on elements that should stay together — table rows, figure/caption pairs, address blocks, and list items. This prevents a heading from appearing at the bottom of one page with its content starting on the next.

4

Create repeating table headers

For long tables spanning multiple pages, use <thead> with display: table-header-group and <tfoot> with display: table-footer-group. The browser automatically repeats these on every page the table spans.

5

Add dynamic page numbers

Use SublimePDF's header/footer template with <span class='pageNumber'></span> and <span class='totalPages'></span> to display running page numbers. Set displayHeaderFooter: true and provide adequate top/bottom margins.

6

Handle variable-length content

Let content flow naturally across pages rather than trying to calculate page breaks manually. Use min-height on sections to ensure they fill at least one page when needed, and let CSS handle overflow onto additional pages.

Pro Tips

  • 💡 Use page-break-before: always on section headings to guarantee each chapter starts on a new page, even if the previous chapter ends mid-page.
  • 💡 For catalogs with product cards, use CSS Grid or Flexbox with break-inside: avoid on each card — this keeps cards intact across page boundaries.
  • 💡 Set @page size explicitly rather than relying on defaults: @page { size: A4 portrait; } ensures consistent output regardless of the API consumer's locale settings.
  • 💡 Test with varying data volumes — your template should look good with 3 items and 300 items. Dynamic pagination means the PDF grows gracefully with content.

Privacy & Security

All processing happens directly in your browser. Your files are never uploaded to any server — they remain on your device throughout the entire process. SublimePDF uses WebAssembly technology for fast, secure, client-side processing.

Works Everywhere

This tool works on any modern browser — Chrome, Firefox, Safari, or Edge — on desktop, tablet, or mobile. No software to install. PDF is an open ISO standard supported by all major platforms.

How to Multi Page PDF Templates — FAQ

How many pages can a single template generate?
There's no hard limit. SublimePDF has generated 500+ page PDFs from a single template. For extremely large documents (1000+ pages), use async generation to avoid HTTP timeouts.
Can I have landscape and portrait pages in the same PDF?
CSS @page rules apply globally to all pages. To mix orientations, generate landscape and portrait sections as separate PDFs and merge them afterward using the merge API.
How do I create a table of contents with page numbers?
Generating a TOC with accurate page numbers requires two-pass rendering. Use the 'tocEnabled': true option to let SublimePDF auto-generate a TOC from your heading elements (h1–h4) on a first pass, then render the final PDF with correct page references.
Why does my PDF have an extra blank page at the end?
Content or margins slightly exceed the last page boundary, pushing an empty page. Reduce bottom padding/margin on the last section, or add a CSS rule: body > *:last-child { margin-bottom: 0; padding-bottom: 0; } to eliminate trailing space.

Ready to get started?

Use SublimePDF's free tools right now.

Open Tool