96

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.

lenord
  • 1,151
  • 1
  • 10
  • 16
  • 7
    `wkhtmltopdf` should respect CSS [@media print](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) rules – dwarring Feb 02 '17 at 22:40
  • Ok this is something to start with. I'll try and find out more about those rules. TY – lenord Feb 03 '17 at 14:25

6 Answers6

120

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;
  }
}
Geraint Anderson
  • 3,234
  • 4
  • 28
  • 49
  • 6
    Although I've solved this like a monkey adding
    and trying until I like it, this is a really useful approach to what I've been asking for and I appreciate a lot.     – lenord May 23 '17 at 19:34
  • 20
    You'll probably also need to specify the `--print-media-type` argument for it to obey `@media print`. – Jared Nov 09 '17 at 04:46
  • 13
    I removed the `@media print {` as I was using serverside rendering. – Souradeep Nanda Feb 07 '19 at 06:12
  • 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. – FilBot3 Feb 08 '21 at 22:45
  • @FilBot3 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. – Geraint Anderson Feb 10 '21 at 11:05
  • 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. – FilBot3 Feb 10 '21 at 14:09
115

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.

Juangui Jordán
  • 6,091
  • 2
  • 35
  • 31
  • 7
    `@media print` didn't work for me either. Thanks, this helped. – Surya Jun 07 '18 at 18:21
  • @Surya Did you remember to add the `--print-media-type` argument when calling wkhtmltopdf, eg `wkhtmltopdf --print-media-type myPage.html myPage.pdf` ? – James Daily Aug 09 '18 at 17:07
  • @JamesDaily - I don't remember if I did. I'll give it a try. Thank you for your comment. – Surya Aug 09 '18 at 18:12
  • 3
    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](https://stackoverflow.com/a/9670743/2223706). – Garrett Jun 04 '19 at 01:34
  • I was running into the same issue until I followed your advice of adding `--print-media-type` to the command line. Thank you – Steve Dec 09 '19 at 17:08
60
<div style = "display:block; clear:both; page-break-after:always;"></div>

Just add that in your html code

Ezekiel
  • 711
  • 5
  • 4
  • This is the kind of response I was looking for: - straightforward, no-bullshit. Just answers the question and most importantly - it works! Well done. – Aries Aug 02 '23 at 04:16
1

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

tommikko
  • 11
  • 1
  • to complete this answer, you also need to deal with html page break as described here https://www.codegrepper.com/code-examples/html/html+page+break – al3x Jan 19 '22 at 12:38
0

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

Lucas Souza Teixeira
  • 1
  • 2
0

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
datu-puti
  • 1,306
  • 14
  • 33