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?

score 67 · Accepted Answer · answered Apr 29 '11 at 17:48

67

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.

answered Apr 29 '11 at 17:48

Jay Godse

15,163
16
84
131

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. – jaredsmith Jan 21 '14 at 05:23
Any ideas why this works on my OSX but it doesn't in LINUX on production? – mariowise Sep 01 '15 at 15:40
Not working for me. – Sakshi Jain May 04 '22 at 11:57
It might have changed in the last 11 years . – Jay Godse May 06 '22 at 17:08

score 14 · Answer 2 · answered Oct 15 '14 at 05:35

14

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>

answered Oct 15 '14 at 05:35

Barhum

215
2
8

vladCovaliov · Answer 3 · 2014-08-27T11:14:23.713

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

It was the overflow-x for me! I use bootstrap 4, so no floats. Nice find! — Tashows, Sep 29 '21 at 12:01

score 4 · Answer 4 · answered Apr 05 '17 at 20:28

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

score 2 · Answer 5 · edited May 23 '17 at 12:02

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.

score 1 · Answer 6 · answered Jan 17 '14 at 18:58

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.

Rails: WickedPDF: Page Breaks

6 Answers6

Linked