PDFkit *.css stylesheets not being applied

Question

I am trying to convert a html page that displays images from facebook cdn to pdf using pdfkit. I am using rails 4.2, pdfkit 0.6.2 and wkhtmltopdf-binary 0.9.9.3.

# Gemfile
gem 'pdfkit'
gem 'wkhtmltopdf-binary'

# controller
def generate_pdf
  @booklet = Booklet.find params[:id]
  @cover = Image.last
  @images = @booklet.images.sort_by(&:uploaded_at)
  respond_to do |format|
    format.html
    format.pdf do
      html = render_to_string(layout: true , action: "generate_pdf.html.haml")
      kit = PDFKit.new(html, page_size: 'A4', orientation: 'Landscape')
      `sass vendor/assets/stylesheets/bootstrap.scss tmp/bootstrap.css`
      `sass vendor/assets/stylesheets/custom.scss tmp/custom.css`
      kit.stylesheets << "#{Rails.root}/tmp/bootstrap.css"
      kit.stylesheets << "#{Rails.root}/tmp/custom.css"
      pdf = kit.to_pdf
      send_data pdf, filename: 'booklet.pdf', type: 'application/pdf'
    end
  end
end

# application.scss
@import 'bootstrap';                                                                                                                                           
@import 'custom';

# config/application.rb
require 'pdfkit'
config.middleware.use PDFKit::Middleware

# config/initializers/mime_types.rb
Mime::Type.register "application/pdf", :pdf unless Mime::Type.lookup_by_extension(:pdf)

The pdf is getting generated and the facebook cdn images are displayed but the stylesheets arent being applied.What am I missing?

I have created a sample repository for the above problem here: https://github.com/prasadsurase/topdf

FYI, the bootstrap.css and custom.css are placed in vendor/assets and have extensions have been renamed to scss. In sass, the assets(fonts and images) have been referred using 'font-path' and 'image-url' rails helper. The assets were precompiled and the application-....css was copied to pdf.css and the assets are referred from the root path(/)

Teepee

This seems to be a running issue with Rails 3.1 and the PDF kits due to the Asset pipeline. I found a similar problem here that hopefully will help a bit. https://mcmap.net/q/645558/-pdfkit-does-not-style-pdfs – Monomerous

@cmw2379 I tried the solutions but it didnt work. can you pls clone the repo and give it a try? – Teepee

If I get some time tonight, I'll give it a try. – Monomerous

Switch to wicked_pdf gem. The included asset helpers work great and the gem is actually better organized and documented. – Groundling

i was in a hurry so moved to wicked_pdf a couple of days after posting this question. it worked. thanks. – Teepee

This isn't really a "solution" - but a workaround, since it has been years since this was initially reported and may never be fixed. Put your styles in an ordinary view file, written as inline with <style> tags - not one in the assets-pipeline nightmare - just a file in "/views/layouts" or similar - then render it in the header of the layout-file you are using for pdfs. – Symmetrize

Answer 1

Does Bootstrap work correctly for other pages in your application? -- The aim is to make sure that you configured the meta tags correctly to include the Bootstrap files, and that you are pointing to the Bootstrap files (which seem to be in /tmp?)

Also, on what OS are you coding? May I recommend to substitute "#{Rails.root}/tmp/bootstrap.css" with Rails.root.join('tmp','bootstrap.css')

Let me know if these help at all -- or not.

Iodic