Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wkhtmltopdf does not print charts from original html page #1964

Open
dcoueron opened this issue Sep 21, 2014 · 67 comments
Open

wkhtmltopdf does not print charts from original html page #1964

dcoueron opened this issue Sep 21, 2014 · 67 comments

Comments

@dcoueron
Copy link

@dcoueron dcoueron commented Sep 21, 2014

Hi everyone,

I'm trying to generate a pdf from a webpage containing js charts but the converted document contains everything except those charts.

When I use the Chrome function to print to pdf, everything works fine.

Please find attached a screen grab of the web page and an example image created by wkhtmltoimage.

Is there a way around this?

Best regards,
Damien

Chrome view:
chrome view

wkhtmltoimage view:
wkhtmltoimage view

@sdwolfz
Copy link

@sdwolfz sdwolfz commented Sep 29, 2014

From my experience, highcharts, d3 and g.raphael svg are displayed in pdf's without the need of a javascript-delay, others like chart.js need a delay of ~300ms and others are not displayed at all (an example would be c3.js).
Also google charts need a huge delay and also render really slow because of all the api calls.
I am also waiting for any hint on how to make it work for stuff like c3.js

@skybondsor
Copy link

@skybondsor skybondsor commented Dec 17, 2014

Like @dcoueron, I'm having trouble getting d3 charts to render in the PDF. Charts render fine in the page in a browser, and they also render when I "print to PDF" in Chrome. They unfortunately don't render with wkhtmltopdf. Google Charts works just fine for me, though.

@webdevilopers
Copy link

@webdevilopers webdevilopers commented Dec 22, 2014

Same problem here with a simple Highcharts example:
https://gist.github.com/webdevilopers/e0d34a1c04ef2050a450#comment-1359856

All animations etc. are disabled and javascript delay was tested. The page displays the chart, the pdf does not.

I testet a jqPlot chart instead which worked fine. I am using the https://github.com/KnpLabs/KnpSnappyBundle for Symfony2 as a wrapper.

Is there a log file I can lookup the actual wkhtmltopdf command? I'm using a Debian Wheezy.

@webdevilopers
Copy link

@webdevilopers webdevilopers commented Jan 8, 2015

There seems to be an issue with wkhtmltopdf and HighCharts using specific ports like 8000 or 8080:

Still checking. Any help would be appreciated!
Feel free to follow my steps on my gist:
https://gist.github.com/webdevilopers/e0d34a1c04ef2050a450

@webdevilopers
Copy link

@webdevilopers webdevilopers commented Jan 8, 2015

I found the root of my problems caused by the PHP built-in server because it is single-threaded.

Fur further details:
https://gist.github.com/webdevilopers/e0d34a1c04ef2050a450#comment-1368355

@JimTrascapoulos
Copy link

@JimTrascapoulos JimTrascapoulos commented Jan 8, 2015

This could also be related - I'm finding that SVG lines that produce dotted lines using -dasharray is not clipping the stroke path. This example:

<svg width="500px" height="14px" viewBox="0 0 500 14">
<line x1="3" x2="530" y1="5" y2="5" stroke="#63a70a" stroke-width="7" stroke-linecap="round" stroke-dasharray="0, 13"/>
</svg>

produces a reddish-brown dotted line of 7px round dots, 13px apart - but on printing (and in some PDF viewers, not Apple's Preview) there is a black stroke in the background; I suspect it's the line path and the renderer isn't clipping it out.

@ashkulz
Copy link
Member

@ashkulz ashkulz commented Jan 8, 2015

Can someone try and see if it is better with 0.13 alpha?

@JohnKacz
Copy link

@JohnKacz JohnKacz commented Jan 20, 2015

@SDWolf, are you able to generate pdfs with wkhtmltopdf containing chart.js charts (which use element)?

I am not able to even if I set a long javascript delay. According to these links on the Google Group (here and here) it looks like it may not be supported.

@sdwolfz
Copy link

@sdwolfz sdwolfz commented Jan 21, 2015

@JohnKacz I tried again just now (wkhtmltopdf 0.12.2.1 (with patched qt)) on the main page of chartjs and it is not working for me either.
When i last tried it i used it in a rails application with the wicked_pdf gem (https://github.com/mileszs/wicked_pdf), i think i used version 0.9 and it worked with a delay of 300ms. I won't be able to test that for a while now but i'd suggest you try on a chart with no animations and see if you have any luck.

@ashkulz
Copy link
Member

@ashkulz ashkulz commented Jan 21, 2015

Did anyone try with 0.13 like I asked earlier?

@laguiz
Copy link

@laguiz laguiz commented Jan 25, 2015

I'm on macos. I don't see build for macos here : http://sourceforge.net/projects/wkhtmltopdf/files/0.13.0-alpha/

I will try on a Windows on try to build is from source.

@laguiz
Copy link

@laguiz laguiz commented Jan 25, 2015

Just tested with wkhtmltoimage 0.13.0-alpha-391fd34 and it seems to be the same.

Tested with :

wkhtmltopdf --javascript-delay 1000 http://www.chartjs.org/docs/#line-chart-example-usage testchartjs.pdf

@laguiz
Copy link

@laguiz laguiz commented Jan 25, 2015

Maybe the previous page was to complexe.

Even with current version of wkhtmltopdf 0.12.2.1 (with patched qt) this is working perfectly :

wkhtmltopdf --javascript-delay 10000 http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html testchartjs2.pdf

Not sure why this page does not work then http://www.chartjs.org/docs/#line-chart-example-usage.

Very good job with wkhtmltopdf.

@jkuchta
Copy link

@jkuchta jkuchta commented Feb 3, 2015

I am having the same issue with c3.js and wkhtmltopdf

/wkhtmltopdf --javascript-delay 5000 "http://c3js.org/samples/chart_donut.html" ~/test.pdf results in a blank chart but the rest of the page is correctly pdf'ed

test

@laguiz
Copy link

@laguiz laguiz commented Feb 7, 2015

I found a workaround for chartjs documentation page.

In short : set the width and height of the parent div container.

Example for chartjs :

In the page http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html we have this html code :

<p>Often, it is used to show trend data, and the comparison of two data sets.</p>

<div class="canvas-holder">
    <canvas width="1636" height="818" style="width: 818px; height: 409px;"></canvas>
</div>

If I only change the above html with (I fix the width and height)

<p>Often, it is used to show trend data, and the comparison of two data sets.</p>

<div class="canvas-holder" style="width: 818px; height: 409px;">
    <canvas width="1636" height="818" style="width: 818px; height: 409px;"></canvas>
</div>

It works for this chart.

@jkuchta Can you try with your c3.js if it's similar?

@JohnKacz
Copy link

@JohnKacz JohnKacz commented Feb 16, 2015

I've got it working with 0.12.2.1 (on both linux and osx) by setting the canvas dimensions in my javascript file. My javascript delay was only 500.

var ctx = $("#radar-chart").get(0).getContext("2d");
ctx.canvas.width = 600;
ctx.canvas.height = 350;

@shamitv
Copy link

@shamitv shamitv commented Apr 12, 2015

Tried some of the scenario with 0.13, SVG works fine now except for some edge cases like embedded images. I am trying to track the issue to parts of QTWebKit by reproducing it with other browsers based on QT.

@jedvardsson
Copy link

@jedvardsson jedvardsson commented May 18, 2015

The following c3 chart renders fine using the latest 0.13.0-alpha (but there are some errors in the output log).

$ wkhtmltoimage --version
wkhtmltoimage 0.13.0-alpha-7b36694
$ wkhtmltoimage --javascript-delay 2000 http://c3js.org/samples/chart_bar.html test.png
xkbcommon: ERROR: failed to add default include path auto
Qt: Failed to create XKB context!
Use QT_XKB_CONFIG_ROOT environmental variable to provide an additional search path, add ':' as separator to provide several search paths and/or make sure that XKB configuration data directory contains recent enough contents, to update please see http://cgit.freedesktop.org/xkeyboard-config/ .
Loading page (1/2)
load glyph failed err=6 face=0x38354e0, glyph=2793===>       ] 88%
Rendering (2/2)                                                    
Done                                                               

image

However, when trying the same page using wkhtmltopdf it does not render properly

$ wkhtmltopdf --javascript-delay 10000 http://c3js.org/samples/chart_bar.html test.pdf
xkbcommon: ERROR: failed to add default include path auto
Qt: Failed to create XKB context!
Use QT_XKB_CONFIG_ROOT environmental variable to provide an additional search path, add ':' as separator to provide several search paths and/or make sure that XKB configuration data directory contains recent enough contents, to update please see http://cgit.freedesktop.org/xkeyboard-config/ .
Loading page (1/2)
load glyph failed err=6 face=0x3ec3b60, glyph=2793===>       ] 88%
Printing pages (2/2)                                               
load glyph failed err=6 face=0x3ec3b60, glyph=2793
Done

image

It looks like the css isn't loaded at all.

@panovek
Copy link

@panovek panovek commented May 23, 2015

How i fix this problem for c3js and wkhtmltopdf 0.12.2.1:

  • Add js code before other javascripts (QtWebKit has problems with Function.prototype.bind):
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
  • Set width style for chart div, for example - style="width:950px;"

@SimonB05
Copy link

@SimonB05 SimonB05 commented Jun 11, 2015

@panovek Thank you so much for your fix, you saved my day !
It works for me with multi charts (d3.js) and wkhtmltopdf 0.12.2.2 (with patch qt) on symfony webapp.

@birko
Copy link

@birko birko commented Jun 18, 2015

hello. i Have the smae issue as @JimTrascapoulos did someone find a workaround for this?

@matheuslc
Copy link

@matheuslc matheuslc commented Nov 9, 2015

Hi, everyone.

Recently, I had the same problem and I solve this by using absolute path in my assets link.

Like this:

<script src="{{ app.request.schemeAndHttpHost ~ asset_url }}"></script>

The entire assets block:

{% block javascripts %}
     {% javascripts
        'assets/vendor/jquery/dist/jquery.js'
        'assets/vendor/highcharts-release/highcharts.js'
        '@AppBundle/Resources/public/js/answerAverageChart.js'
    %}

        <script src="{{ app.request.schemeAndHttpHost ~ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

Cheers.

@rafaeldiassoares
Copy link

@rafaeldiassoares rafaeldiassoares commented Nov 17, 2015

@matheuslc use this script in head tag?

{% block javascripts %}
     {% javascripts
        'assets/vendor/jquery/dist/jquery.js'
        'assets/vendor/highcharts-release/highcharts.js'
        '@AppBundle/Resources/public/js/answerAverageChart.js'
    %}
        <script src="{{ app.request.schemeAndHttpHost ~ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

my code

<link rel="stylesheet" href="css/styles.css"/>
{% block javascripts %}
    {% javascripts
    'js/amcharts.js'
    'js/amcharts.pie.js'
    'js/amcharts.serial.js',
    'js/amcharts.amstock.js',
    'js/amcharts.lang.pt.js',
    'js/moment.js',
    'js/moment.lang.pt-br.js',
    'js/lodash.js',
    'js/jquery.js',
    'relatorio-monitoramento-pulverizacoes.js'
    %}
    {% endjavascripts %}
{% endblock %}
</head>

Another example is?

@matheuslc
Copy link

@matheuslc matheuslc commented Nov 18, 2015

@rafaeldiassoares No, this scrips are before the body tag.

@kikuchiyo
Copy link

@kikuchiyo kikuchiyo commented Dec 19, 2015

Using wkhtmltopdf and c3.js (d3.js implicitly) and was unable to get any svg to show up in pdfs; turned on debug-javascript option and started getting errors at locations where d3 uses greek characters; swapped out all the greek characters with hideous looking replacements, like 'greek_delta' for ∂ - about a dozen different chars used - and c3.js charts started showing up in my pdfs. wkhtmltopdf rendering of the page cannot handle the greek chars, but browsers can. Give it a try for a short term fix if you've been banging your head against the wall all day with kwhtmltopdf and c3.js.

@ralfclaassens
Copy link

@ralfclaassens ralfclaassens commented Mar 18, 2016

Problem:
When using wkhtmltopdf / wkhtmltoimage the pdf / image on a html page (with Google Chart), it did not contain the Google chart. The output (pdf / png) was simply blank at the position the Google Chart should show up. The original html page was okay, of course.

Solution:
I solved this issue (Google Charts + wkhtmltopdf) by replacing:

<script src="http://www.gstatic.com/charts/loader.js"></script>

by

<script src="http://www.google.com/jsapi"></script>

Somehow the wkhtmltopdf library could not handle a Google Chart html page which contains the first javascript include.

@waspinator
Copy link

@waspinator waspinator commented Apr 17, 2016

I experience a similar issue when trying to include a QR code PNG image generated with https://github.com/endroid/QrCode. It works fine in the web browser, but not in the PDF.

<img src="http://localhost/img/tmp/qr.png">   
<img src="http://localhost/generate_qr/">

@mauriciojaramillo
Copy link

@mauriciojaramillo mauriciojaramillo commented Oct 25, 2018

Hi all

I solved the problem converting the canvas TAG to IMG TAG with this expression:

'< img src="' + document.getElementById('canvas').toDataURL() + '">'

And voila, all works fine; the PDF document show the chartjs graph included.

I hope this help to others to solve the problem.

@gregallensworth
Copy link

@gregallensworth gregallensworth commented Oct 25, 2018

@panovek Your Function.prototype.bind patch worked for me, an immediate fix for this old platform. Thank you!

Situation: Static Linux build of 0.12.3 with QT patch. Using wkhtmltoimage to render a Google Maps map with canvas vector drawing (google.maps.Polygon).

@WitnessMee
Copy link

@WitnessMee WitnessMee commented Jan 30, 2019

For me the render only worked correctly when I used wkhtmltopdf version 0.12.2.1. Version 0.12.4.1 did not work correctly with chart.js.
Chart.js version had to be 2.6.0. Did not work with version 2.7.0

<!DOCTYPE html>
<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

    <div id="canvas-holder" style="width: 400px; height: 400px;">
      <canvas id="myChart" width="400" height="400"></canvas>
    </div>
    <script>
      var barData = {
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
          {
            backgroundColor: "#48A497",
            borderColor: "#48A4D1",
            data: [456, 479, 324, 569, 702, 600]
          }
        ]
      };

      // get bar chart canvas
      var ctx = document.getElementById("myChart").getContext("2d");

      // draw bar chart

      window.myBar = new Chart(ctx, {
        type: "bar",
        data: barData,
        options: {
          responsive: true,
          legend: {
            position: "top"
          },
          title: {
            display: true,
            text: "Chart.js Bar Chart"
          }
        }
      });
    </script>
  </body>
</html>

@antemaIT
Copy link

@antemaIT antemaIT commented Feb 25, 2019

Hi
I need to show in pdf a view whith svg and rect bloc, I use laravel snappy but the result in empty, can you help me please?

@0888
Copy link

@0888 0888 commented Mar 29, 2019

How i fix this problem for c3js and wkhtmltopdf 0.12.2.1:

  • Add js code before other javascripts (QtWebKit has problems with Function.prototype.bind):
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
  • Set width style for chart div, for example - style="width:950px;"

@panovek Thank you so much for your fix, you saved my day !

@nschappl
Copy link

@nschappl nschappl commented May 10, 2019

I wasn’t able to get wkhtmltopdf to work for my use-cases either. I had problems with integrating ES6. Also, the javascript delay wasn’t useful when you had PDFs getting created with different amount of asynchronously loaded data — sometimes it only takes 1 second but other times it takes 10 seconds, and so it’s pretty inefficient to always wait 10 seconds for the PDF to generate.

After burning many hours trying to get wkhtmltopdf to work, I gave up and found a simple microservice for converting HTML (or a URL) to images/pdfs available on Bantam.io. I got the PDF generation I needed there in a couple minutes.

bantam
  .run('@images/html/url', {
    url: 'https://www.mapbox.com/mapbox-gl-js/style-spec/',
    waitUntil: 'networkidle0',
  })
  .then(pdfUrl => {
      // the PDF is temporarily hosted on AWS S3 via a secured URL at `pdfUrl`
      //    - you can download it, send the link to others, etc
      //    - if you need permanent storage, you can get the raw PDF data and
      //      pipe it somewhere by using the `request` node module like:
      //      `request.get(pdfUrl).pipe(res);`
    });

Here are the docs: https://bantam.io/functions/@images/html?link=docs&subLink=0

There are some awesome configs as well like the networkidle0 above which waits for all network connections at the specified URL to stop for half a second before capturing the PDF (e.g. ensuring that data is loaded when the PDF is created without waiting an arbitrarily long period of time).

Maybe this can help some people that are still stuck.

@philguiol
Copy link

@philguiol philguiol commented Sep 16, 2019

Hello, none of the aforementioned solutions had worked for me either because the charts I'm rendering are using and not . Here was my solution. It's rather cumbersome and not as elegant as other solutions, but it works. I would only recommend this as a last resort if you're about to start pulling your hair out.

The problem seemed to be that no matter the js delay set, the charts would not render. However, if I pasted the actual content of the in the code, that would render perfectly.

I'm using PHP on the backend, and this is not for a client facing solution, so we can afford the extra effort. It involves 2 passes for each file, and you'll need a directory for your chart files. I've also modified the original code to make it framework agnostic. Please adapt to whatever your framework is

Pass 1
Load the page and do the following:

  • Give an ID to each chart and place the id in the encapsulating
    tag
  • Generate the charts. In the tag, include the height and width: eg. <svg style="height:200px;width:980px">
  • Create a function to send the chart to the backend and send each chart to the backend
sendChartToBackend(divID){
   let htmlData=document.getElementById(this.divID).innerHTML;
   let divID=this.divID;
   axios.post('createCharts.php',{svg:htmlData,id:divID})
   .then((response) => {
     console.log('chart created');
   });
 }

  • createCharts.php is very simple:
$request_body = file_get_contents('php://input');
$requests=json_decode($request_body,true);
file_put_contents('exportCharts/'.$requests['id'].'.html',$requests['svg']);

Pass 2
On the second pass, instead of generating the chart, just include the chart file

if(file_exists('exportCharts/'.$chartID.'.html')){
    $chart=file_get_contents('exportCharts/'.$divID.'.html');
    echo '<div id="'.$divID.'">'.$chart.'</div>';
  }

Again, it's not elegant, and it's cumbersome, but it works

@hvlucas
Copy link

@hvlucas hvlucas commented Sep 27, 2019

Downgrading jquery and foundation worked for me.
"foundation-sites": "^6.5.3" => "foundation-sites": "^6.4.2"
"jquery": "^3.4.1" => "jquery": "^3.2.1"

@qkreltms
Copy link

@qkreltms qkreltms commented Oct 25, 2019

For the people who are using wkhtmltopdf@0.13.0 alpha withbillboard.js, in my case when I set size of options it works!!

   
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.10.2/billboard.pkgd.min.js"
    integrity="sha256-Zth/YbGPYiBDtq+1LLKbwdtotlso+zpnlYPz4BRyOkk=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/billboard.js/1.9.4/billboard.min.css" />
  <style>
    .reportGraph {
      width: 900px
    }
  </style>
</head>

<body>
  <div id="chart" style="width: 818px; height: 409px;"></div>

  <script type="text/javascript">
    bb.generate({
      size: {
        height: 240,
        width: 480
      },
      bindto: "#chart",
      data: {
        columns: [
          ["data1", 30, 200, 100, 170, 150, 250],
          ["data2", 130, 100, 140, 35, 110, 50]
        ],
        types: {
          data1: "radar",
          data2: "radar"
        },
        colors: {
          data1: "red",
          data2: "green"
        }
      }
    });

  </script>
</body>

</html>

@qkreltms
Copy link

@qkreltms qkreltms commented Oct 25, 2019

For the people who are using wkhtmltopdf@0.13.0 alpha with chart.js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
  <style>
    .reportGraph {
      width: 900px
    }
  </style>
</head>

<body>

  <div class="reportGraph"><canvas id="canvas"></canvas></div>

  <script type="text/javascript">
    // wkhtmltopdf 0.12.5 crash fix.
    // https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3242#issuecomment-518099192
    'use strict';
    (function (setLineDash) {
      CanvasRenderingContext2D.prototype.setLineDash = function () {
        if (!arguments[0].length) {
          arguments[0] = [1, 0];
        }
        // Now, call the original method
        return setLineDash.apply(this, arguments);
      };
    })(CanvasRenderingContext2D.prototype.setLineDash);
    Function.prototype.bind = Function.prototype.bind || function (thisp) {
      var fn = this;
      return function () {
        return fn.apply(thisp, arguments);
      };
    };

    const labelAtEndOfLinePlugin = {
      afterDraw: (chart) => {
        console.log(chart)
        const ctx = chart.ctx;
        if (!ctx) {
          return;
        }
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        ctx.font = "9rem NotoSansKR";
        ctx.fillStyle = "#19201F";
        ctx.fillText("TEST", 15, 15);
      }
    };

    const changeChartAreaBackgroundColorPlugin = {
      beforeDraw: (chart) => {
        var ctx = chart.ctx;
        var chartArea = chart.chartArea;

        ctx.fillStyle = "Azure ";
        ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
      }
    };

    var lineChartData = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          fillColor: "rgba(220,220,220,0.5)",
          strokeColor: "rgba(220,220,220,1)",
          pointColor: "rgba(220,220,220,1)",
          pointStrokeColor: "#fff",
          data: [65, 59, 90, 81, 56, 55, 40],
          bezierCurve: false
        }
      ]

    }

    var myLine = new Chart(document.getElementById("canvas").getContext("2d"), {
      data: lineChartData,
      type: "line",
      options: {
        animation: {
          duration: 0
        }
      },
      plugins: [labelAtEndOfLinePlugin, changeChartAreaBackgroundColorPlugin]
    });

  </script>
</body>

</html>

@sijeesh
Copy link

@sijeesh sijeesh commented Oct 25, 2019

How i fix this problem for c3js and wkhtmltopdf 0.12.2.1:

  • Add js code before other javascripts (QtWebKit has problems with Function.prototype.bind):
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
  • Set width style for chart div, for example - style="width:950px;"

Saved my day, Thanks a lot. it's important to set the width of the chart container.

@becurrie
Copy link

@becurrie becurrie commented Oct 25, 2019

I think it's worth noting here for anybody debugging or looking to figure out why their chart is not rendering, even after implementing the solutions talked about above. We ran into this issue and it was caused by some ES2015 features being implemented in the javascript that's executed before the chart is rendered on our page.

We didn't notice this at first since the -q flag was being added to our command by our web server implicitly, make sure you disable that and check the command output that's failing to render chart.

After modifying the javascript to use vanilla javascript, the chart renders properly in the PDF file!

@altjx
Copy link

@altjx altjx commented Nov 24, 2019

With the same file and two separate systems, I can only get this working on one of them. The one where I can get this working is wkhtmltopdf 0.12.5 whereas the other one is wkhtmltopdf 0.12.5 (with patched qt) inside of a docker Ubuntu image. First of all, does anyone know what "patched QT" is and how I can get wkhtmltopdf without that? I feel like that'll solve my issue for some reason since I have it working on one system.

All of the javascript is inline with the HTML file and no external calls are being made. I also have the size attribute set too (again, same file, two separate systems -- works on one but not the other)

EDIT

So I finally nailed down to ONLY being able to render charts when using xvfb-run with wkhtmltopdf within my docker image. The problem, however, is that launching wkhtmltopdf with xvfb-run ignores the font used within the HTML page and defaults back to something like Courier instead of Arial (font works just fine without xvfb-run)

@sasha-x
Copy link

@sasha-x sasha-x commented Dec 26, 2019

+1 Have a trouble with line and bar charts.

@roomm
Copy link

@roomm roomm commented Jan 17, 2020

How i fix this problem for c3js and wkhtmltopdf 0.12.2.1:

  • Add js code before other javascripts (QtWebKit has problems with Function.prototype.bind):
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);
    };
};
  • Set width style for chart div, for example - style="width:950px;"

You saved my day and my week!
This also solves the problem for Highcharts

@bhavinzwt
Copy link

@bhavinzwt bhavinzwt commented Feb 12, 2020

Can we generate PDF using with anychart which chart is rendered with SVG?

@JaredOzzy
Copy link

@JaredOzzy JaredOzzy commented Aug 16, 2020

How is this still an issue?

Latest im using wkhtmltopdf and charts.js...

@sasha-x
Copy link

@sasha-x sasha-x commented Aug 17, 2020

How is this still an issue?

Not sure. Should I recheck it?

@JaredOzzy
Copy link

@JaredOzzy JaredOzzy commented Aug 17, 2020

How is this still an issue?

Not sure. Should I recheck it?

100% sure its still an issue with wkhtmltopdf.

I was using 0.12.5.0 and it wasn't working, then i dropped down to 0.12.2.1 and i got it working by adding a div that had width and height set like others have suggested.

@samdavidge
Copy link

@samdavidge samdavidge commented Sep 15, 2020

The solution for me was to set the responsive option to false and set the height and width on the canvas element.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

None yet