Jvectormap and Google Charts not showing in the PDF

samgville commented 6 years ago

Hello,

I'm using Wicked PDF to generate a report which shows a Map generated by jvectormap and a Bar Chart that is generated with Google Charts.

I'm using this two gems 'wicked_pdf' and 'wkhtmltopdf-binary-edge'. I have set a JavaScript delay on the respond_to Method of 50000m and on the initializers we have specified the path of the needed wicked gems. And then I'm using a pdf_layout.html.erb where we set the pdf generation.

Here are the files I'm talking about: Gemfile:

Gemfile
gem 'wicked_pdf'
gem 'wkhtmltopdf-binary-edge'

Controller: respond_to format

format.pdf do
        @is_pdf = true
        pdf = WickedPdf.new.pdf_from_string(render_to_string("reports/show.html.erb",
                                                              encoding: "UTF-8",
                                                              layout: "reports/layout_pdf.html.erb",
                                                              page_size: "Letter",
                                                              margin:  {  bottom:            0,
                                                                          top:               0,
                                                                          left:              0,
                                                                          right:             0,  },
                                                              javascript_delay: 50000,
                                            ))
        send_data pdf, :filename => "resume.pdf", :type => "application/pdf", :disposition => "attachment"
      end

The PDF Layout:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>PDF Generation</title>
    <%= csrf_meta_tags %>
    <%= wicked_pdf_stylesheet_link_tag 'report' %>
    <%= wicked_pdf_stylesheet_link_tag 'pdfreport' %>
    <%= wicked_pdf_stylesheet_link_tag 'ionicons' %>
    <%= wicked_pdf_stylesheet_link_tag 'font-awesome' %>
    <%= wicked_pdf_stylesheet_link_tag 'import-bootstrap' %>
    <%= wicked_pdf_stylesheet_link_tag 'jquery-jvectormap-2.0.3' %>
    <%= wicked_pdf_javascript_include_tag 'jquery' %>
    <%= wicked_pdf_javascript_include_tag 'jquery-jvectormap' %>
    <%= wicked_pdf_javascript_include_tag 'jquery-jvectormap-world-mill' %>
    <%= wicked_pdf_javascript_include_tag 'jquery-jvectormap-world-en' %>
    <%= wicked_pdf_javascript_include_tag 'market_map' %>
    <%= wicked_pdf_javascript_include_tag 'number_pages' %>
    <%= wicked_pdf_javascript_include_tag 'highcharts' %>
    <%= wicked_pdf_javascript_include_tag 'https://www.gstatic.com/charts/loader.js' %>

  </head>
  <body onload="number_pages">
    <div id="content">
      <%= yield %>
    </div>
  </body>
</html>

The map and the charts are showing in the HTML online view but not when you generate the pdf.

Is this enough information to report an issue? Or do you need more code to be shown?

unixmonkey commented 6 years ago

It is certainly possible for wkhtmltopdf to render a jvectormap.

You can see it working by calling wkhtmltopdf http://jvectormap.com/examples/world-gdp/ output.pdf on the command-line

However, I tried to reproduce your issue and had a similar result (blank where the map should be). But if I called wkhtmltopdf http://localhost:3000/my_wicked_pdf_endpoint (HTML version) it would render the map.

This leads me to suspect it is related to a content security policy or something interfering with loading from a file vs from a webpage.

I don't have a solid answer for you at this time, and I need to go AFK for awhile, but wanted you to be aware of my findings.

You could potentially work around this by shelling out in one endpoint to load another (though this may cause a deadlock in development mode if you are using a webserver that is configured to be single-threaded like Webrick).

Let me know how it goes or if you find any potential reasons for this behavior before I do.

unixmonkey commented 6 years ago

Additionally, I was able to get it working by rendering just the HTML from a controller action, then targeting that with the Rack Middleware options

__config/initializers/wicked_pdf.rb__

WickedPdf.config = {
  #:wkhtmltopdf => '/usr/local/bin/wkhtmltopdf',
  #:layout => "pdf.html",
  # exe_path: '/usr/local/bin/wkhtmltopdf'
}

config_709 = {
  page_size: "Letter",
  margin:  {  bottom:            0,
              top:               0,
              left:              0,
              right:             0 }
}
Rails.application.config.middleware.use WickedPdf::Middleware, config_709, only: '/pages/issue_709' # my jvectormap endpoint

I added an example to the wicked_pdf_issues project to show how I got it working: https://github.com/unixmonkey/wicked_pdf_issues/commit/a747bd7b8df1740993414c522fa1cb5adc4ac963

https://wicked-pdf-issues.herokuapp.com/pages/issue_709.pdf

I hope this helps!

samgville commented 6 years ago

Hey @unixmonkey thanks for your help we got this working yesterday using that Middelware, we are having an issue now with Google Charts, the same one we had with Jvectormap, We will continue working on this matter and let you know if we found a solution for that too. Thanks!

mileszs / wicked_pdf

Jvectormap and Google Charts not showing in the PDF #709