Askar
Askar

Reputation: 5854

making a page break when pdf generated with wicked_pdf

sample.erb.html

<p>Page 1</p1>

<p>Page 2</p2>

So, everything after "Page 1" I want to print on the 2nd page.

How can I do this?

There's one solution in SO but it didn't work for me.

For example, in case of Prawn, it has a nice feature called start_new_page

Upvotes: 5

Views: 7695

Answers (4)

Ravistm
Ravistm

Reputation: 2213

One quick method is to use below HTML:

<div style="page-break-before: always;"></div>
From this line onwards HTML Content will come in next page

Upvotes: 0

M. Wyatt
M. Wyatt

Reputation: 170

For anyone still having this problem but none of these answers, like for me, just aren't working: I gave up on using CSS to fix the page breaks and instead generated 2 pdfs and merged them together and used the resulting file instead, that way there is no possible way for a page break to not exist.

To merge files, an array of pdf file names, I used

system("pdftk #{files.join(' ')} cat output merged_file_name.pdf")

Update

I don't remember where I generated 2 pdfs but I did manage to do these page breaks in a single pdf file by manually counting the pixels in the .html.erb files. <% @pixel_height = 0 %> and <% @page_height = 980 %>. view the pdf as html to see how many pixels each section takes up. Add to @pixel_height.

In places a page break would make sense, I check @pixel_height + 20 >= @page_height (20 being the number of pixels a <tr> took up for most of our pdfs) and rendering a manual page break and resetting @pixel_height to 0. The manual page break closes all the html tags, adds a 0 pixel tall div with a page-break-after: always, and opens the html tags again.

I've only had 2 problems with this method:

  • If some text in the pdf is too long, it will line-break and throw off the @pixel_count causing a automatic page break in an odd spot and a manual page break also in an odd spot
  • WickedPdf is slow

To combat these 2 issues, we've been slowly migrating our pdfs to Prawn, specifically Prawn::Table. It is much faster and it calculates the height of each row before it draws the pdf so page breaks are more predictable and consistent

Upvotes: 0

vladCovaliov
vladCovaliov

Reputation: 4403

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

Upvotes: 1

rderoldan1
rderoldan1

Reputation: 4088

in your css

p{page-break-after: always;}

Update

After a couple of questions, I will expand my answer and how I use it in my apps.

1 Some times, the wickedpdf helpers doesn't work, so I add an initializer

_config/initializers/wiked_pdf.rb_

module WickedPdfHelper
  def wicked_pdf_stylesheet_link_tag(*sources)
    sources.collect { |source|
      "<style type='text/css'>#{Rails.application.assets.find_asset("#{source}.css")}</style>"
    }.join("\n").gsub(/url\(['"](.+)['"]\)(.+)/,%[url("#{wicked_pdf_image_location("\\1")}")\\2]).html_safe
  end

  def wicked_pdf_image_tag(img, options={})
    image_tag wicked_pdf_image_location(img), options
  end

  def wicked_pdf_image_location(img)
    "file://#{Rails.root.join('app', 'assets', 'images', img)}"
  end

  def wicked_pdf_javascript_src_tag(source)
    "<script type='text/javascript'>#{Rails.application.assets.find_asset("#{source}.js").body}</script>"
  end

  def wicked_pdf_javascript_include_tag(*sources)
    sources.collect{ |source| wicked_pdf_javascript_src_tag(source) }.join("\n").html_safe
  end

  WickedPdf.config = {

  }
end

2 In application controller create a config method with the general config params

_app/controllers/application_controller.rb_

class ApplicationController < ActionController::Base
  def pdf_config
    WickedPdf.config = {
        :wkhtmltopdf => "/usr/local/bin/wkhtmltopdf",
        :orientation  => 'Landscape',
        :layout => "pdf.html",
        :footer => {
            :left => "Rectores Lideres Transformadores",
            #:left => "#{Entidad.find(@current_user.entidad).nombre}",
            :right => "#{Time.now}",
            :font_size => 5,
            :center => '[page] de [topage]'
        },
        :disposition => 'attachment'

    }
  end

end

3 Create a common layout for all of your pdf files. Here I use my application css in order to maintain the same look and feel of web page in pdf reports, only I have to use the same classes and id's

app/layouts/pdf.html.erb

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <%= wicked_pdf_stylesheet_link_tag "application" %> ----- HERE YOUR APPLICATION CSS -----
</head>
<div id="content">
  <%= yield %>
</div>
</body>
</html>

4 Add pdf redirection in your controllers

_app/controllers/users_controller.rb_

 def index
    @users = User.all

    respond_to do |format|
      format.pdf do
        pdf_config
        render  :pdf => "filename"
      end
    end
  end

5 Now, in your css, choose which html id is the page brake

 #brake{page-break-after: always;}

Upvotes: 4

Related Questions