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 page breaks is as follows:

<style>
  @media print
  {
    h1 {page-break-before:always}
  }
</style>

However, when I render the page with wicked_pdf, it does not separate the document into two pages. Is there something else that I must do to get page breaks with wicked_pdf?

Callis

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.

Callis

If you are using bootstrap and .spanX to deal with spacing then that may be causing the page-break-* attributes from working. .spanX in bootstrap uses float which disrupts the effects you want. In this case clear:both; most likely solved that problem for you. – Egypt

Any ideas why this works on my OSX but it doesn't in LINUX on production? – Ushas

Not working for me. – Carthusian

It might have changed in the last 11 years . – Callis

Answer 2

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>

Manure

Answer 3

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

Affluence

It was the overflow-x for me! I use bootstrap 4, so no floats. Nice find! – Disgruntle

Answer 4

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

Stocks

Answer 5

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://mcmap.net/q/410475/-how-to-create-a-multipage-pdf-in-rails-representing-one-table-of-data-including-column-headers-on-each-new-page 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.

Tanager

Answer 6

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.

Decoration