Using html2canvas to render a highcharts chart to pdf doesn't work on IE and Firefox

Question

We are using html2canvas.js and html2canvas.svg.js (version 0.5.0 beta1) and highcharts.js to download a donut chart into pdf.

This works as expected in Chrome, however in IE and Firefox this isnt working. In IE the chart is rendered incorrectly, and in Firefox it is not rendered at all.

Below are screenshots of the download in Chrome, IE and Firefox

Chrome

IE (Edge)

Firefox

The code i am using to do the html2canvas is as follows:

html2canvas($("#container"), {
    onrendered: function (canvas) {
      var imgData = canvas.toDataURL(
        'image/png');
      var doc = new jsPDF('p', 'mm');
      doc.addImage(imgData, 'PNG', 10, 10);
      doc.save('sample-file.pdf');
    }
  });

I have created a jsFiddle that demonstrates the issue here - http://jsfiddle.net/jko0rs5g/3/

Does anyone know what might be causing this issue, and how we can resolve it?

EDIT

Just to clarify why we are not using the built in Highcharts exporting, this for when we are adding additional html to the Highcarts, such as additional information above or below the chart, or a score inside the donut for example. I have updated the jsfiddle to reflect this.

Have you considered exporting module? Highcharts has [exporting module](http://www.highcharts.com/docs/export-module/export-module-overview) that allows chart exporting to e.g. PDF format. JSFiddle: http://jsfiddle.net/27mp2ww8/ — Kacper Madej, Dec 02 '15 at 12:40
@Kacper Yes, under most situations we use the built in Highcharts exporting, which works well. This is for when there are a combination of Highcharts and normal html on a page which needs exporting in its entirety (the example just shows a single Highcharts chart for example purposes). — Rob, Dec 02 '15 at 14:24
Not an answer, but an alternative ... http://www.cloudformatter.com/CSS2Pdf.SVGCharts.HighCharts — Kevin Brown, Dec 03 '15 at 01:24
I think there may be some issue with html2canvas lib. Check [this answer](http://stackoverflow.com/questions/18570765/using-html2canvas-with-highcharts). — Paweł Fus, Dec 03 '15 at 14:51

score 14 · Accepted Answer · edited May 23 '17 at 11:54

Thanks to Pawel Fus for the nod in the right direction, we got this working using canvg.js, which temporarily replaces the svg with a canvas before calling html2canvas.

The final issue came when some of the html within the svg uses em's to size the font (which unfortunately a lot of our templates do). We got around this by updating the font size for anything using em's to the underlying pixel size before rendering the svg into a canvas (see Get computed font size for DOM element in JS for how we calculated the actual font size)

Below is the updated code for the download button click

$('#download').click(function() {
  var svgElements = $("#container").find('svg');

  //replace all svgs with a temp canvas
  svgElements.each(function() {
    var canvas, xml;

    // canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element.
    $.each($(this).find('[style*=em]'), function(index, el) {
      $(this).css('font-size', getStyle(el, 'font-size'));
    });

    canvas = document.createElement("canvas");
    canvas.className = "screenShotTempCanvas";
    //convert SVG into a XML string
    xml = (new XMLSerializer()).serializeToString(this);

    // Removing the name space as IE throws an error
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

    //draw the SVG onto a canvas
    canvg(canvas, xml);
    $(canvas).insertAfter(this);
    //hide the SVG element
    $(this).attr('class', 'tempHide');
    $(this).hide();
  });


  html2canvas($("#container"), {
    onrendered: function(canvas) {
      var imgData = canvas.toDataURL(
        'image/png');
      var doc = new jsPDF('p', 'mm');
      doc.addImage(imgData, 'PNG', 10, 10);
      doc.save('sample-file.pdf');
    }
  });

  $("#container").find('.screenShotTempCanvas').remove();
  $("#container").find('.tempHide').show().removeClass('tempHide');
});

See an updated jsfiddle of it in action here - http://jsfiddle.net/zuvzcgvz/22/

Hey @Rob, thanks for sharing. I don't think I can get the fiddle to work though. I am very interested in it. Could you confirm it is working still? — ackzell, May 18 '16 at 03:30
@ackzell - I have updated the jsFiddle link so this should now be working again. The path to the jspdf.min.js file had changed so was not being downloaded — Rob, May 23 '16 at 13:48
Thanks a lot for the update @Rob. I actually got it working following the code you provided on the answer. Glad you shared it. I now need to work on how to increase the quality of the export. — ackzell, May 26 '16 at 03:33
I am facing the same problem..but i didn't use any chart in my code..I have normal table and html components in my webpage but generated pdf is showing blank..may i a get some help?but in chrome it is perfectly working.. — USERRR5, May 16 '18 at 08:29

Using html2canvas to render a highcharts chart to pdf doesn't work on IE and Firefox

1 Answers1

Linked