How to break pages and HTML tables in htmltools application by using CSS Page Breaks When Converting HTML to PDF?

Similarly like in word editors, there are also page breaks in CSS that allows you to break your content across pages. With these properties you can control page breaks when printing and converting to PDF.

https://www.verypdf.com/app/html-converter/index.html

image

How to control page breaks in CSS?
There are three different css properties for page break control:

* page-break-before
The page-break-before property control a page-break that occur immediately before the element to which it is applied.

* page-break-after
The page-break-after property control a page-break that occur immediately after the element to which it is applied.

* page-break-inside
The page-break-inside property control a page-break inside the element to which it is applied.

These properties can be applied to block-level elements in the normal flow of the root element.

Syntax for css page break property
page-break-after: auto | always | avoid | left | right
page-break-before: auto | always | avoid | left | right
page-break-inside: auto | avoid

Detailed descriptions of each css page break possible value:

auto: Initial value. Automatic page breaks.
always: Always force page breaks before/after the element.
avoid: Avoid page breaks before/after/inside the element.
left: Force page breaks before/after the element so that the next page is formatted as a left page.
right: Force page breaks before/after the element so that the next page is formatted as a right page.

/* avoid splitting element across pages */
.no-break {
  page-break-inside: avoid;
}
/* force h2 title to display on new page */
h2 {
  page-break-before: always;
}

<h2>Title</h2>
<div>
  ... content ...
</div>
<div class=”no-break”>
  ... content inside this element will not break from page to page ...
</div>
<h2>New page title</h2>

How to control page breaks inside tables?
HTML PDF API controls page breaks in tables and table rows automatically, but however, in some specific situations with advance layout, you can get all kinds of incompatibility. If you're building the table in such situations, we'd suggest cutting it up into smaller tables, and put page breaks between them. The other solution is to convert table to block elements structure.

Also HTML PDF API is trying to keep image elements from being split in half automatically, but in tables they may hang over the page break a bit. The best way to deal with this problem is to wrap img with block-element.

.no-break {
  page-break-inside: avoid;
}

<td>
  <div class="no-break">
    <img src="http://placehold.it/350x700">
    <img src="http://placehold.it/350x600">
  </div>
</td>

But if your HTML file contains complicated CSS styles, and if "page-break-after" or "page-break-inside" or "page-break-before" option doesn't work, in this case, we have another solution to you, please refer to following steps,

1. You may split your long HTML file to several small HTML files by "<div style = "display:block; clear:both; page-break-after:always;"></div>" tag, one HTML file per page, you may write a PHP script to do this work, it's not difficulty. You may put some common resources into external files, and refer to these external files from these single page HTML files.

2. You may run htmltools.exe to convert these HTML files to PDF files one by one,
 
htmltools.exe -webkit "-$" "XXXXXXXXXXXXXXXXXXX" -javascript-delay 5000 -run-script-file "chart_legend_fix.txt" page1.html page1.pdf
htmltools.exe -webkit "-$" "XXXXXXXXXXXXXXXXXXX" -javascript-delay 5000 -run-script-file "chart_legend_fix.txt" page2.html page2.pdf
htmltools.exe -webkit "-$" "XXXXXXXXXXXXXXXXXXX" -javascript-delay 5000 -run-script-file "chart_legend_fix.txt" page3.html page3.pdf
htmltools.exe -webkit "-$" "XXXXXXXXXXXXXXXXXXX" -javascript-delay 5000 -run-script-file "chart_legend_fix.txt" page4.html page4.pdf
htmltools.exe -webkit "-$" "XXXXXXXXXXXXXXXXXXX" -javascript-delay 5000 -run-script-file "chart_legend_fix.txt" page5.html page5.pdf
 
3. You may combine these PDF files into one final PDF file by "-mergepdf" option,
 
htmltools.exe -mergepdf "C:\*.pdf" C:\out.pdf
htmltools.exe -mergepdf "C:\filelist.txt" C:\out.pdf
htmltools.exe -mergepdf "C:\test-extraction.pdf*10-15 C:\out10-15.pdf
htmltools.exe -mergepdf "C:\test-extraction.pdf*500-501 C:\out500-501.pdf

We hope above solution will work fine to you, you may give it a try.

VN:F [1.9.20_1166]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.20_1166]
Rating: 0 (from 0 votes)

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *


Verify Code   If you cannot see the CheckCode image,please refresh the page again!