Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to insert a page break in HTML so wkhtmltopdf parses it?

So basically I'm using wkhtmltopdf to convert a dynamic HTML report to PDF.

The report has a particular format and I've been asked to clone that format with HTML.

The problem I'm facing is that I can't simulate a 100% functional page break in html so wkhtmltopdf can interpret it and send content to another page.

I'm trying to avoid page size measurement methods and so.

TIA for any help provided.

EDIT: So far I'm emulating page break using <br> and it works. I still have to do some testing though.

like image 269
lenord Avatar asked Feb 02 '17 15:02

lenord


People also ask

How do I add a page-break in Wkhtmltopdf?

In order to force a page break or new page in a PDF for wkhtmltopdf or Headless Chrome, you need to use the page-break rules. The easiest way is to setup a <div> tag and then apply the style directly to the <div> that wraps the content you want to appear on individual pages.

How do I create a dynamic page-break in HTML?

page-break-before: auto instead of . page-break-before: always. The "auto" will break the page only if the contents are at the end if the page, this will prevent breaking the page and leaving a lot of blank space.

How do you do a page-break in CSS?

The page-break-after property adds a page-break after a specified element. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on an empty <div> or on absolutely positioned elements.


1 Answers

Specify a CSS rule specific to the print media type. There are a number of properties that can be used for paging. I find it easiest to attach the page-break-before property to a class, as shown below.

In the HTML:

<p>Page 1, paragraph 1</p> <p class="new-page">Page 2, paragraph 1</p> <p>Page 2, paragraph 2</p> 

In the CSS:

@media print {   .new-page {     page-break-before: always;   } } 
like image 197
Geraint Anderson Avatar answered Sep 21 '22 16:09

Geraint Anderson