简体   繁体   中英

wicked_pdf gem + Highcharts

I read some answers, but didnt solve my problem.

Html charts works good, but when I export to PDF with wicked_pdf charts doesnt show.

I set chart options :

 plotOptions: {
      series: {
        enableMouseTracking: false,
        shadow: false, 
        animation: false
      }
    },

And tried giving javascript delay.

I tried including and not including in my layout the jquery and/or highcharts js files again according to some posts I read.

But nothing is working for me , my wkhtmltopdf library version is :

wkhtmltopdf 0.12.2.1 (with patched qt)

All answers I read are 2+ years old so maybe someone can help me with a newer method.

Finally solved.

Some steps were not necessary, but I will note it anyways to help the most people :

1.- Change wkhtmltopdf version, I was using 0.12 , now I installed

gem 'wkhtmltopdf-binary'

This gem works with 0.9 version of wkhtmltopdf

2.- Remove animation and other stuff from Highcharts. Seems like works without it too, buts its better to be sure, I'm testing locally and things like animation increases the risk of not rendering the complete chart in time.

Add this config to charts container file :

plotOptions: {
  series: {
    enableMouseTracking: false,
    shadow: false, 
    animation: false
  }
},

****Note : check if you already set plotOptions in another part of your chart, if you already did just add the lines to the existent plotOptions , if you write it twice it wont work.***

3.- Add HTML structure to the layout html file, remember that wicked_pdf can't see your assets pipeline.

<HTML>
<HEAD> scripts </HEAD>
<BODY> charts and text </BODY>
</HTML>

4.- Include both internal and external JS files (include CSS files if you have) in the PDF layout view (HEAD tag), in my case I used js files to store my chart templates and generate dynamic charts like this :

   <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/heatmap.js"></script>
    <%= wicked_pdf_javascript_include_tag "chart_templates/chart_bar_combined" %>

Hope it helps, this answer combines some short and less explained solutions.

Regards

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM