Images and CSS not displaying - suggestion for fix

[beerlington]

I was trying to render a page within my application as a PDF and the images weren't loading and CSS styles weren't being applied. The reason is because wkhtmltopdf doesn't know which server to load them from. The fork at http://github.com/lleirborras/wicked_pdf suggests creating a custom layout for the PDF and specify the request host/port. This works, but is an unnecessary step if you just want to render your standard templates as is. My suggestion is to replace all the paths for things like /stylesheets and /images after render_to_string:

# In make_pdf function of pdf_helper.rb

html_string = externals_to_absolute_path(render_to_string(:template => options[:template], :layout => options[:layout]))

# New function defined in pdf_helper.rb

def externals_to_absolute_path(html) 
  html.gsub(/\/(stylesheets|images|system)\//) {|s| "http://#{request.host_with_port}/#{$1}/" } 
end

I have hardcoded a few different paths that I am using (/system is where paperclip stores uploaded images), but these could easily be added to the options hash. You can do this with javascript files too, but one of the systems I tested on (Centos 5 w/ Ruby 1.8.5) was hanging with that included so I pulled it out.

[dougal]

I was just about to post on this problem.

A more-inclusive take on the GSUB is:

.gsub(/(src|href)="//) { |s| "#{$1}="http://#{request.host_with_port}/" }

This covers javascript, images, stylesheets and probably a few others without having app-specific selectors in there.

[beerlington]

That could definitely work, but as I mentioned above, I ran into a problem where javascript was causing wkhtmltopdf to hang. I'm not sure if it was a problem with ruby 1.8.5 or the version of wkhtmltopdf I was using, but removing javascript fixed it. I tested on a Mac system running 1.8.7 and did not experience the same issue. Just a heads up for anyone who might also experience that.

[dougal]

There's a flag on the wkhtmltopdf command that prevents JS/plugins from running, plus a few other useful flags such as rendering in 'print' media mode.

[asteed]

Just to point out a small fix to dougal's code,

.gsub(/(src|href)="//) { |s| "#{$1}="http://#{request.host_with_port}/" }

[gipnokote]

This helper works perfectly for making correct image tags:
def pdf_image_tag(image, options = {})
options[:src] = File.expand_path(RAILS_ROOT) + '/public/images/' + image
tag(:img, options)
end

[skaczor]

Another small fix to handle SSL and single quotes:
html.gsub(/(src|href)=('|")//) { |s| "#{$1}=#{$2}#{request.protocol}#{request.host_with_port}/" }

[mgharios]

Hi, I'm relatively new to RoR and currently trying to render images inside the pdf (using wickedpdf). I added the method , suggested by gipnokote for "pdf_image_tag" but I'm not really sure how to access it now.

Any help or point in the right direction is appreciated.

[gipnokote]

mgharios,

I use it in the view simply like this (image should be stored in the public/images/ folder):

<%= pdf_image_tag 'logo.png' %>

You can also add any HTML options after the image name like this:

<%= pdf_image_tag 'logo.png', :alt => 'This is the logo' %>

[mgharios]

gpnokote, thanks for the quick reply! I tried this and it tells me the method is not defined "undefined method `pdf_image_tag' for #ActionView::Base:0x477aef0".
My pdf_helper.rb is located under Vendor/plugins/wicked_pdf_lib. The html view i'm calling it from belongs to an object "customers". Should I move pdf_helper.rb file or include it somewhere ?

thanks!

[gipnokote]

mgharios, I don't think you shoult put anything under vendor/plugin folder in this case.
You have several options now. If you generate pdf in Orders controller for example, you can put this function definition into either:

1. app/helpers/order_helper.rb (your current controller helper)
2. app/helpers/application_helper.rb (things in this helper are always visible in all views)
3. app/helpers/pdf_helper.rb (custom helper, in this case you have to include it in your controller like this):

helper :pdf_helper

[mgharios]

This is GREAT! Thank you! I didn't realize I can put this method in any helper ( for some reason I thought it had to be inside the pdf_helper.rb which is part of the wickedpdf. Anyway, I ended using method # (1) from your options and put it into customers_helpe.rb which is where I'm generating my pdf from :)

thanks again!
Marina

[foton]

The
wicked_pdf_stylesheet_link_tag("pdf") (in wicked_pdf_helper.rb)
does not work correctly on windows
instead :

i get :

   <link href="/stylesheets/pdf.css?1293633573" media="all" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/C:/Users/foton/Documents/workspace/app1/public/stylesheets/pdf.css" media="all" rel="stylesheet" type="text/css" />

Prefix "/stylesheets/" for fullpath css is wrong.
Any better way to construct correct stylesheet link?

Foton

[suneelkumar91]

This helper code works for me.

def absolute_path_for_src(body)
   body.gsub(/(src|href)=('|")\//) { |s| "#{$1}=#{$2}#{request.protocol}#{request.host_with_port}/" }
 end