Page Break in PDF #2982

moh-samadieh · 2016-06-05T12:25:28Z

Hi

I want to convert some html files to pdf but on some points i want to have page breaks.

Maybe we can have some pagebreak tag in html and use that for splitting pages in pdf

I did not find any parameter for this, Please help me with it.

metasean · 2017-02-11T04:12:43Z

@aiphee - Even with !important none of the page-break-xxx commands are working for me in v.0.12.3. (they work fine if I just print straight from the browser). I suspect that's what @moh-samadieh was asking about.

Unfortunately, v.0.12.4 has it's own issue that prevents me from using it.

aiphee · 2017-02-11T07:07:09Z

Well the answer is correct, if it is not working for some reason for you, then you need to fill full bug report, so it can be solved.

AFAIK, the biggest pain in the ass for the open source developer, is dealing with overwhelming and incomplete bug report.

PhilterPaper · 2017-02-11T14:11:36Z

There are a lot of reported problems with page-break-xxxx within various parts of tables. I don't recall seeing such reports for other elements (but that doesn't mean they don't exist!). Make sure your page-break CSS is within any correct media so that wkHTMLtoPDF is seeing it, and try to avoid page breaks within tables. See if that helps at all. Do some experimentation, such as a page break before every <div>, to confirm that your CSS is properly structured and is being processed.

metasean · 2017-02-11T17:25:34Z

I'm using the basic pandoc <src.file> --from markdown --to html5+yaml_metadata_block --standalone --css style.css --toc --output <out.file> to generate the html. Sections aren't divided with divs, but do have h# tags.

The relevant part of my css is:

@media print {
  h2 {
    page-break-before: always;
      /* I've also tried 
      page-break-after: always;
      page-break-inside: always;
      */
  }
}

Which works perfectly if I just ⌘-P from the browser, but isn't working in wkhtmltopdf.

ansezz · 2017-06-15T12:22:35Z

use this classes for page break :

<style type="text/css" media="screen,print">
       /* Page Breaks */

/***Always insert a page break before the element***/
       .pb_before {
           page-break-before: always !important;
       }

/***Always insert a page break after the element***/
       .pb_after {
           page-break-after: always !important;
       }

/***Avoid page break before the element (if possible)***/
       .pb_before_avoid {
           page-break-before: avoid !important;
       }

/***Avoid page break after the element (if possible)***/
       .pb_after_avoid {
           page-break-after: avoid !important;
       }

/* Avoid page break inside the element (if possible) */
       .pbi_avoid {
           page-break-inside: avoid !important;
       }

   </style>

adamasantares · 2017-07-03T06:07:04Z

Hi @ansezz

how should looks the html then? I mean, will be nice to have an example.

something like this?

<div class="page1 pb_after">
   content...
</div>
<div class="page2 pb_before pb_after">
   content....
</div>

UPD: damn! It works :) 👍

anandhuded2 · 2017-07-20T07:03:53Z

Hi @ ansezz and adamasantares,

still I am facing problem with the page break. can you help me out?

Refs wkhtmltopdf/wkhtmltopdf#2982 (comment)

This build is based on d08d0bf. This commit was created by the following Travis CI build and job: https://travis-ci.org/greenelab/manubot-rootstock/builds/255655530 https://travis-ci.org/greenelab/manubot-rootstock/jobs/255655531 [ci skip] The full commit message that triggered this build is copied below: page-break control using HTML classes (#35) Refs wkhtmltopdf/wkhtmltopdf#2982 (comment)

adamasantares · 2017-07-25T05:33:59Z

@anandhuded2

I can try. What is your html code?

sebgmc · 2017-10-20T12:22:02Z

I have the same issue with WKHTMLTOPDF 0.12.4, regardless of browser used. in a webapp. Even when I say media="print" the print-window/-console does not adhere to the setting, in any browser on Windows. Very frustrating, even making all elements display:block; (which is a prerequisite). It does not matter if I try this on a Hx, p, table, tr, td or div, on all HTML-tags this CSS-setting is ignored. Anyone having this working anywhere?

The settings page-break-before and page-break-after at least are working in the print-window/-console. But not the -inside setting :-(

CSS:

.contentBlock, div, h2, h3, p { 
    display:block ! important; 
    page-break-inside:avoid ! important; 
}

HTML:

<html>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content">
	<div id="container">
		<div class="contentBlock">
			<h2>Some header</h2>
			<p>[some content goes here]</p>
		</div>
		<div class="contentBlock">
			<h2>Some header</h2>
			<p>[here goes some other content]</p>
		</div>
		<div class="contentBlock">
			<h2>Some header</h2>
			<p>[final block of content goes here]</p>
		</div>
	</div>
</div>
</body>
</html>

UPDATE: If i strip the page down to its bare necessities (without html, body and the containing divs) I can get WKHTMLTOPDF to adhere the the page-break-inside:avoid setting :-) That means rendering the same page differently for WKHTMLTOPDF than for the browser. I achieve this with a stylesheet for all rendered HTML-elements that are to be hidden (#header, #sidebar { display:none; }) and a server-side language if to NOT draw the <div id="content">, <div id="container"> and end div's of those blocks when called by WKHTMLTOPDF.

Leftover HTML sent to WKHTMLTOPDF:

<div class="contentBlock">
	<h2>Some header</h2>
	<p>[some content goes here]</p>
</div>
<div class="contentBlock">
	<h2>Some header</h2>
	<p>[here goes some other content]</p>
</div>
<div class="contentBlock">
	<h2>Some header</h2>
	<p>[final block of content goes here]</p>
</div>

matejsvajger · 2018-08-29T13:21:54Z

Everyone having problems with page breaks not working with CSS rules, make sure none of the parents divs are floated to either side.

I had a parent container with float:left; and took me some nerving hours to figure that out.

moolmanruan · 2018-10-01T08:57:56Z

Thanks for the tip @matejsvajger, helped me realize why my page-break-before: always; wasn't being respected.

Here's a basic example that worked for me:

<!DOCTYPE html>
<html>
<head>
    <style>
        .page {
            padding: 100px;
        }

        @media screen {
            .page {
                page-break-before: always !important;
            }
        }
    </style>
</head>
<body>
    <div class="page">
        <div style="height: 20px; background-color: #f91"></div>
        <div style="height: 20px; background-color: #91f"></div>
        <div style="height: 20px; background-color: #1f9"></div>
    </div>
    <div class="page">
        <div style="height: 20px; background-color: #000"></div>
        <div style="height: 20px; background-color: #aaa"></div>
    </div>
</body>
</html>

You could also add the print media, but I didn't need it.

ultrono · 2019-11-21T19:17:15Z

Thanks for the tip @matejsvajger, helped me realize why my page-break-before: always; wasn't being respected.

Here's a basic example that worked for me:

<!DOCTYPE html>
<html>
<head>
    <style>
        .page {
            padding: 100px;
        }

        @media screen {
            .page {
                page-break-before: always !important;
            }
        }
    </style>
</head>
<body>
    <div class="page">
        <div style="height: 20px; background-color: #f91"></div>
        <div style="height: 20px; background-color: #91f"></div>
        <div style="height: 20px; background-color: #1f9"></div>
    </div>
    <div class="page">
        <div style="height: 20px; background-color: #000"></div>
        <div style="height: 20px; background-color: #aaa"></div>
    </div>
</body>
</html>

You could also add the print media, but I didn't need it.

Sanity restored, your solution worked!

TheAndroidGuy · 2019-12-19T23:18:29Z

Everyone having problems with page breaks not working with CSS rules, make sure none of the parents divs are floated to either side.

I had a parent container with float:left; and took me some nerving hours to figure that out.

Thank you brother. You saved me 👍

ganmahmud · 2020-02-26T16:59:01Z

For dynamic repetitive content, we may use the following three properties together -

.item {
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
    page-break-before: avoid !important;
}

Krishnaveni26 · 2020-07-24T13:07:59Z

Hi,

Im using wkhtmltopdf 0.12.5 version.

Page break before is not working fine for me.I tried all the above solutions.

Please suggest.

TheAndroidGuy · 2020-07-24T13:32:16Z

@Krishnaveni26 i suggest you post the code snippet you are using.

Lucasrd · 2020-07-24T14:10:19Z

i'm also having problems with this, tried @BoontjieBoon exact same code but it didn't work (ps: downgraded to version 0.10.0 rc2 and is working)

Krishnaveni26 · 2020-07-24T14:18:41Z

@Krishnaveni26 i suggest you post the code snippet you are using.

$html.='<div class="pageBreak" style="height:20px;" id="closings">Print Closings</div>';
`
CSS:
.pageBreak {
font-family: "Open Sans", sans-serif;
font-size: 12pt;
margin-top:20px;
color: #232021;
}
@media print {
.pageBreak {
page-break-before: always !important;
}
}

TheAndroidGuy · 2020-07-25T11:39:07Z

@Krishnaveni26 well because you are using @media print you have to use the option wkhtmltopdf --print-media-type.
I tested it and it works.

Krishnaveni26 · 2020-07-27T05:30:40Z

@Krishnaveni26 well because you are using @media print you have to use the option wkhtmltopdf --print-media-type.
I tested it and it works.

Hi @TheAndroidGuy ....

I tried the above one, but still the page break is not working.

TheAndroidGuy · 2020-07-27T11:47:50Z

@Krishnaveni26 I don't know then. It works properly on my environment.

Noah2610 · 2020-12-02T22:13:11Z

Any news on this issue? The CSS property page-break-* also does not create a page break in the PDF for me.
wkhtmltopdf version 0.12.6

successful-fella · 2021-02-04T19:58:33Z

I'd same problem and spent days changing versions, trying out solutions and finally found this solution for page break working -

* {
    overflow: visible !important;
}

Source

You have to use standard page-break-after/before CSS as mentioned in above replies + set this overflow and it should work!

christilt · 2021-03-18T16:08:26Z

I'd same problem and spent days changing versions, trying out solutions and finally found this solution for page break working -
* {
    overflow: visible !important;
}
Source

You have to use standard page-break-after/before CSS as mentioned in above replies + set this overflow and it should work!

Thanks - the issue was overflow related for me also. Removing overflow-x: hidden in parent elements fixed it.

To be clear I found this different to how the same CSS is currently rendered in Chrome, FF and IE11, where I didn't need to remove overflow-x to get page breaks working as expected.

AimanMRT · 2021-07-29T15:14:25Z

I have the same issue with WKHTMLTOPDF 0.12.4, regardless of browser used. in a webapp. Even when I say media="print" the print-window/-console does not adhere to the setting, in any browser on Windows. Very frustrating, even making all elements display:block; (which is a prerequisite). It does not matter if I try this on a Hx, p, table, tr, td or div, on all HTML-tags this CSS-setting is ignored. Anyone having this working anywhere?

The settings page-break-before and page-break-after at least are working in the print-window/-console. But not the -inside setting :-(

CSS:
.contentBlock, div, h2, h3, p { 
    display:block ! important; 
    page-break-inside:avoid ! important; 
}
HTML:
<html>
<body>
<div id="header"></div>
<div id="sidebar"></div>
<div id="content">
	<div id="container">
		<div class="contentBlock">
			<h2>Some header</h2>
			<p>[some content goes here]</p>
		</div>
		<div class="contentBlock">
			<h2>Some header</h2>
			<p>[here goes some other content]</p>
		</div>
		<div class="contentBlock">
			<h2>Some header</h2>
			<p>[final block of content goes here]</p>
		</div>
	</div>
</div>
</body>
</html>
UPDATE: If i strip the page down to its bare necessities (without html, body and the containing divs) I can get WKHTMLTOPDF to adhere the the page-break-inside:avoid setting :-) That means rendering the same page differently for WKHTMLTOPDF than for the browser. I achieve this with a stylesheet for all rendered HTML-elements that are to be hidden (#header, #sidebar { display:none; }) and a server-side language if to NOT draw the <div id="content">, <div id="container"> and end div's of those blocks when called by WKHTMLTOPDF.

Leftover HTML sent to WKHTMLTOPDF:
<div class="contentBlock">
	<h2>Some header</h2>
	<p>[some content goes here]</p>
</div>
<div class="contentBlock">
	<h2>Some header</h2>
	<p>[here goes some other content]</p>
</div>
<div class="contentBlock">
	<h2>Some header</h2>
	<p>[final block of content goes here]</p>
</div>

What mean by " to be hidden"??

engagit · 2021-08-31T21:37:27Z

I recently upgraded from 0.12.2.4 (Ubuntu 16) to 0.12.5 (Ubuntu 18), and now page breaks are not working for me. The code has not changed.

My html:

<title>This is the HTML Title</title> <style> .new-page { page-break-before: always !important; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:16px; width:100%; text-align:right; } </style>

text content here

And I use it with this command:
wkhtmltopdf header.html header.pdf

dhimmel added a commit to dhimmel/manubot-rootstock that referenced this issue Jul 20, 2017

page-break control using HTML classes

473b893

Refs wkhtmltopdf/wkhtmltopdf#2982 (comment)

dhimmel added a commit to manubot/rootstock that referenced this issue Jul 20, 2017

page-break control using HTML classes (#35)

d08d0bf

Refs wkhtmltopdf/wkhtmltopdf#2982 (comment)

sebgmc mentioned this issue Oct 20, 2017

page-break-inside: avoid is erratic marcbachmann/node-html-pdf#223

Open

alloylab added the NeedInfo label Jun 15, 2018

Tomsgu mentioned this issue Jul 20, 2018

page break not working properly #4014

Closed

ashkulz added Documentation and removed NeedInfo labels Nov 22, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Page Break in PDF #2982

Page Break in PDF #2982

moh-samadieh commented Jun 5, 2016

metasean commented Feb 11, 2017

aiphee commented Feb 11, 2017

PhilterPaper commented Feb 11, 2017

metasean commented Feb 11, 2017

ansezz commented Jun 15, 2017 •

edited

Loading

adamasantares commented Jul 3, 2017 •

edited

Loading

anandhuded2 commented Jul 20, 2017

adamasantares commented Jul 25, 2017

sebgmc commented Oct 20, 2017 •

edited by Tomsgu

Loading

matejsvajger commented Aug 29, 2018

moolmanruan commented Oct 1, 2018

ultrono commented Nov 21, 2019

TheAndroidGuy commented Dec 19, 2019

ganmahmud commented Feb 26, 2020

Krishnaveni26 commented Jul 24, 2020

TheAndroidGuy commented Jul 24, 2020

Lucasrd commented Jul 24, 2020

Krishnaveni26 commented Jul 24, 2020 •

edited

Loading

TheAndroidGuy commented Jul 25, 2020 •

edited

Loading

Krishnaveni26 commented Jul 27, 2020

TheAndroidGuy commented Jul 27, 2020

Noah2610 commented Dec 2, 2020

successful-fella commented Feb 4, 2021 •

edited

Loading

christilt commented Mar 18, 2021

AimanMRT commented Jul 29, 2021 •

edited

Loading

engagit commented Aug 31, 2021

Page Break in PDF #2982

Page Break in PDF #2982

Comments

moh-samadieh commented Jun 5, 2016

metasean commented Feb 11, 2017

aiphee commented Feb 11, 2017

PhilterPaper commented Feb 11, 2017

metasean commented Feb 11, 2017

ansezz commented Jun 15, 2017 • edited Loading

adamasantares commented Jul 3, 2017 • edited Loading

anandhuded2 commented Jul 20, 2017

adamasantares commented Jul 25, 2017

sebgmc commented Oct 20, 2017 • edited by Tomsgu Loading

matejsvajger commented Aug 29, 2018

moolmanruan commented Oct 1, 2018

ultrono commented Nov 21, 2019

TheAndroidGuy commented Dec 19, 2019

ganmahmud commented Feb 26, 2020

Krishnaveni26 commented Jul 24, 2020

TheAndroidGuy commented Jul 24, 2020

Lucasrd commented Jul 24, 2020

Krishnaveni26 commented Jul 24, 2020 • edited Loading

TheAndroidGuy commented Jul 25, 2020 • edited Loading

Krishnaveni26 commented Jul 27, 2020

TheAndroidGuy commented Jul 27, 2020

Noah2610 commented Dec 2, 2020

successful-fella commented Feb 4, 2021 • edited Loading

christilt commented Mar 18, 2021

AimanMRT commented Jul 29, 2021 • edited Loading

engagit commented Aug 31, 2021

ansezz commented Jun 15, 2017 •

edited

Loading

adamasantares commented Jul 3, 2017 •

edited

Loading

sebgmc commented Oct 20, 2017 •

edited by Tomsgu

Loading

Krishnaveni26 commented Jul 24, 2020 •

edited

Loading

TheAndroidGuy commented Jul 25, 2020 •

edited

Loading

successful-fella commented Feb 4, 2021 •

edited

Loading

AimanMRT commented Jul 29, 2021 •

edited

Loading