Member Avatar for jefferyylc

Hi ALL:

I been created a <page-break-after:always> for page break purpose in printing HTML report in order to break the report.
But unluckily i found that what i did is known as "hard coded". They want something called "Dynamic Page Break" so that when the report content can automatically fit the A4 paper size (210*297mm), and so the user can choose to print whatever page they want. (page number will be showed after each page break). Do anyone can help me or provide some idea? Mayb i think that that's only way is to use javascript to test the height of report elements. I'm just a trainee in company, and i try for this almost 2 weeks but still can't get to find any solutions.
I do really appreciate if there's someone expert will help. Thanks a lot! :eek:

  • 2 Contributors
  • 2 Replies
  • 340 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by jefferyylc

Dani AI

Generated

As discovered, printing HTML with reliable, automatic A4 page breaks is tricky: the browser’s print pipeline was not designed for WYSIWYG paged layout the same way a PDF renderer is. ’s PDF suggestion is the most robust route when it’s allowed, but if you must print from the browser there are two practical approaches: (A) use a client-side paged-media polyfill (recommended), or (B) do a JS-driven pagination pass that wraps content into print-sized “pages.” (pagedjs.org)

Minimal CSS to declare A4 and a footer counter (browser support varies; these rules are fully supported by paged-media engines like Paged.js and by print renderers such as Prince): 

@media print {
  @page { size: A4; margin: 12mm; }
  @page { @bottom-center { content: "Page " counter(page) " of " counter(pages); } }
  .print-page { break-after: page; break-inside: avoid; }
}

Use this with Paged.js to get running headers/footers and reliable page counters in-browser; PrinceXML or headless-browser PDF tooling will also honor @page margin boxes. (pagedjs.org)

If you must implement your own JS paginator (brittle but doable): compute printable height in pixels (A4 height minus margins), convert mm to px using the CSS convention (1in = 96px, so 1mm = 96/25.4 px), then iterate child blocks, cloning them into a page container until scrollHeight would overflow — then start a new page. Wait for fonts and images to load before measuring. This conversion is approximate on screens but works well for preparing print layouts. (web.dev)

Practical tips: test in the target browser’s Print Preview and with “Print to PDF”; avoid forcing too many “avoid” rules (creates big blank areas); expect user/driver print margins and scaling to sometimes override site rules. If full fidelity is required and server-side PDF is allowed, use a headless renderer (Playwright/Puppeteer) or a print-focused engine for deterministic results. (developer.mozilla.org)

Recommended Answers

All 2 Replies

Member Avatar for DaveSW

Page breaks in html... not good...
Could you export to pdf? php can be used to create pdfs.

Member Avatar for jefferyylc

Page breaks in html... not good...
Could you export to pdf? php can be used to create pdfs.

-The only way i can do is using Page Break in HTML. The others method was rejected. so someone who knw pls share it. I appreciate it. TQ ...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.