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

Question

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.

Forficate

wkhtmltopdf should respect CSS @media print rules – Nubile

Ok this is something to start with. I'll try and find out more about those rules. TY – Forficate

Answer 1

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;
  }
}

Selfsame

Although I've solved this like a monkey adding <br> and trying until I like it, this is a really useful approach to what I've been asking for and I appreciate a lot. – Forficate

You'll probably also need to specify the --print-media-type argument for it to obey @media print. – Pulchritudinous

I removed the @media print { as I was using serverside rendering. – Wilburn

I am getting a blank first page when I do this method. It works mostly, except the first page is blank. I'm using Pandoc to convert MD to HTML then wkhtmltopdf as the pdf-engine. – Urata

@Urata Assuming you have not added the new-page class to the first page, inspect the CSS to see if it has a page break before the content begins. That might help trace where it is coming from. – Selfsame

I think what my problem was is that I was using Pandoc to run wkhtmltopdf to make the PDF. It would continually add a blank page between the cover and the frist page, or with no cover, just a blank page. – Urata

Answer 2

When I use wkhtmltopdf, I work with the following classes:

.keep-together {
    page-break-inside: avoid;
}

.break-before {
    page-break-before: always;
}

.break-after {
    page-break-after: always;
}

So I can force:

• That a particular container content is not spread over two pages (if it fits one page). When using the keep-together class a page break is created before the container if necessary.
• That a page break is forced before a particular container.
• That a page break is forced after a particular container.

The @media print didn't work for me with wkhtmltopdf.

Noshow

@media print didn't work for me either. Thanks, this helped. – Mordacious

@Mordacious Did you remember to add the --print-media-type argument when calling wkhtmltopdf, eg wkhtmltopdf --print-media-type myPage.html myPage.pdf ? – Suzy

@JamesDaily - I don't remember if I did. I'll give it a try. Thank you for your comment. – Mordacious

This still wasn't working for me, but it turned out to be because I had overflow-x: hidden set on the html and body tag. See here. – Sardius

I was running into the same issue until I followed your advice of adding --print-media-type to the command line. Thank you – Dragline

Answer 3

<div style = "display:block; clear:both; page-break-after:always;"></div>

Just add that in your html code

Ankara

This is the real one!! Without running with any arguments, thanks!! – Natation

Answer 4

@media print worked for me with wkhtmltopdf when I used the option --print-media-type for wkhtmltopdf

Tiu

to complete this answer, you also need to deal with html page break as described here codegrepper.com/code-examples/html/html+page+break – Athwartships

Answer 5

people having this issue, try downgrading wkhtmltopdf to version 0.10.0 rc2, worked for me

Mosley

Answer 6

When using wkhtmltopdf as the pdf engine for pandoc, the order of passing options to wkhtmltopdf mattered.

For example, this did not work, because --pdf-engine-opt=toc came before --pdf-engine-opt=--print-media-type:

pandoc --pdf-engine-opt=toc --pdf-engine-opt=--print-media-type --pdf-engine=wkhtmltopdf -o out.pdf out.md

Switching them around did work:

pandoc --pdf-engine-opt=--print-media-type --pdf-engine-opt=toc --pdf-engine=wkhtmltopdf -o out.pdf out.md

Congregate

Answer 7

If your page content is dynamic, I think this would be more suitable.

bookjs-eazy

• Mainly solve the problem of HTML generating PDF and paging control. From then on, it is no longer difficult to generate high-quality PDF.

• Advantages:

1. Just focus on using H5 to construct your PDF content, without worrying about paging and content truncation, and automatically paging according to rules.
2. Support preview, what you see is what you get. Support WEB printing, support custom page number/directory/header/footer.
3. Both the front and back ends can generate PDF, the front end can print and save as PDF, and the back end can use chrome headless and wkhtmltopdf command line PDF generation tools.
4. Docker mirror. A print generation service that can quickly build your online PDF
5. Compatible with mainstream browsers and mobile terminals

Clupeid