Rails: WickedPDF: Page Breaks

Question

In my Ruby (1.9.2) Rails (3.0.x) I would like to render a web page as PDF using wicked_pdf, and I would like to control where the page breaks are. My CSS code to control pag

Answer 1

For some reason, the "@media print" didn't quite do it. I just went with

.page-break { display:block; clear:both; page-break-after:always; }

for the CSS rule, and then I stuck the following in my page for a page break:

<div class="page-break"></div>

That just worked.

Answer 2

None of these solutions worked for me. I did find a solution that worked for many people in the gem issues here - https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524

you want to add CSS on the element that needs the page break. In my case, it was table rows, so I added:

tr {
 page-break-inside: avoid;
}

Answer 3

Tried Jay's solution but could not get it to work (maybe a conflict with other css)

I got it to work with this:

<p style='page-break-after:always;'></p>

Answer 4

i had the same issue and what ended up working for me was to make sure that my element with

page-break: always;

was on the root of the document, seems when its nested inside of other elements, especially ones with height assigned, the declaration gets ignored.

hope this helps someone.

Answer 5

I had the same problem and I discovered something that might help. This was my page break CSS code:

.page-break {
  display: block;
  clear: both;
  page-break-after: always;
}

This didn't work because of TWO reasons:

I. In one of the SASS imported file I had this line of code:

html, body
  overflow-x: hidden !important

II. The other problem was bootstrap

@import "bootstrap"

It looks like because of the float: left in:

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}

the page break is no longer working. So, just add this after you import bootstrap.

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: initial !important;
}

Answer 6

Make sure that the stylesheet link tag includes media='print" or media='all' if you are using an external stylesheet:

<%= stylesheet_link_tag 'retailers_pdf',media: 'all' %>

or

<%= stylesheet_link_tag 'retailers_pdf',media: 'print' %>

otherwise wicked_pdf will not pick it up.

Also note that if you are in the middle of a table or div with a border, that the page-break attributes will not work. In this case, it's time to break out jQuery and start splitting things up. This answer: https://stackoverflow.com/a/13394466/2016616 has a good snippet for position measurement. I am working on clean and repeatable table-splitting code and will post it when I have finished it.