pdfkit does not style pdfs

Question

I have a rails 3.1 app that creates pdf documents using pdfkit, and everything works as specified, except for the fact that the generated pdfs don't have any styling. I am assuming that wkhtmltopdf doesn't have access to my stylesheets and that it is not a larger issue than that. Would anyone have a clue as to how you would allow access to these stylesheets? I have basically followed railscast #220 on the subject, however I have had to create a new initializer to get pdfkit to work with rails 3.1.

This is the initializer that I had to use to get pdfkit to work with rails 3.1

ActionController::Base.asset_host = Proc.new { |source, request|
  if request.env["REQUEST_PATH"].include? ".pdf"
    "file://#{Rails.root.join('public')}"
  else
    "#{request.protocol}#{request.host_with_port}"
  end
 } 

The link to the pdf looks like this:

<%= link_to 'Download PDF', load_path(@load, :format => "pdf") %>

This will give me a link to the pdf that has no styling.

In my application.rb I have configured pdfkit as such:

config.middleware.use PDFKit::Middleware, :print_media_type => true

I have also added this to my layouts/application.html.erb file:

<%= stylesheet_link_tag    "application", :media => "all" %>

Answer 1

Stealing a couple of lines from the middleware code found at https://github.com/pdfkit/pdfkit/blob/master/lib/pdfkit/middleware.rb

You can use:

root = PDFKit.configuration.root_url || "#{env['rack.url_scheme']}://#{env['HTTP_HOST']}/"
html.gsub!(/(href|src)=(['"])\/([^\"']*|[^"']*)['"]/, '\1=\2' + root + '\3\2')

My example is:

html = render_to_string #render current action to string
root = PDFKit.configuration.root_url || "#{env['rack.url_scheme']}://#{env['HTTP_HOST']}/"
html.gsub!(/(href|src)=(['"])\/([^\"']*|[^"']*)['"]/, '\1=\2' + root + '\3\2')
kit = PDFKit.new(html, :print_media_type => true)

Answer 2

For me it was problem with installation for ubuntu. I just reinstalled from source:

# first, installing dependencies
sudo aptitude install openssl build-essential xorg libssl-dev

# for 64bits OS
wget http://wkhtmltopdf.googlecode.com/files/wkhtmltopdf-0.9.9-static-amd64.tar.bz2 
tar xvjf wkhtmltopdf-0.9.9-static-amd64.tar.bz2
mv wkhtmltopdf-amd64 /usr/local/bin/wkhtmltopdf
chmod +x /usr/local/bin/wkhtmltopdf

# for 32bits OS
wget http://wkhtmltopdf.googlecode.com/files/wkhtmltopdf-0.9.9-static-i386.tar.bz2 
tar xvjf wkhtmltopdf-0.9.9-static-i386.tar.bz2
mv wkhtmltopdf-i386 /usr/local/bin/wkhtmltopdf
chmod +x /usr/local/bin/wkhtmltopdf

And everything works now for me. So my advice is do not install wkhtmltopdf by this command sudo apt-get install wkhtmltopdf and install it from sources. Full instructions for installation process

Answer 3

I know you're looking for solution that will render whole page, just reminder for googling people that there is still problem free workaround

class DocumentController < ApplicationController

  def show
    @document = Document.last
    # ... implement your respond_to

    kit = PDFKit.new(@document.content, :page_size => 'Letter')
    kit.stylesheets << "#{Rails.root}/app/assets/stylesheets/pdf.css"
    send_data kit.to_pdf, :filename => "#{@document.title}.pdf", :type => 'application/pdf'
  end

end

now the pdf.css must be css, so teoretically if you need to load sass load it from pre-compiled public/assets/

Answer 4

I ran into this problem as well, and it appears that when the asset pipeline was added in Rails 3.1, pdfkit has a problem with the stylesheet links. See the GitHub issue about this problem.

I ended up switching to wicked_pdf and am really happy with it. They've solved this problem and it works nicely on Rails 3.2.x (haven't tried 3.1.x).

Answer 5

I have used gem 'wicked_pdf' and its helpers to include CSS into pages. Internally that helpers just read all CSS files and include into the page itself. So if you prefer to use PdfKit try to investigate how to include non-inline stylesheets.

Answer 6

I have successfully run PDFKit on Rails 3.1. I have used a different setup though.

At first I had the same problem you did but that was because stylesheet_link_tag has a default set to media => "screen"; specifying explicitely media => "all" fixed it.