使用 html2canvas 将 highcharts 图表呈现为 pdf 在 IE 和 Firefox 上不起作用

Question

我们正在使用 html2canvas.js 和 html2canvas.svg.js（版本 0.5.0 beta1）和 highcharts.js 将圆环图下载为 pdf。

这在 Chrome 中按预期工作，但在 IE 和 Firefox 中不起作用。在 IE 中图表呈现不正确，在 Firefox 中根本不呈现。

以下是在 Chrome、IE 和 Firefox

中下载的屏幕截图

Chrome

IE（边缘）

Firefox

我用来做 html2canvas 的代码如下：

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');
    }
  });

我创建了一个 jsFiddle 来演示这里的问题 - http://jsfiddle.net/jko0rs5g/3/

有谁知道可能导致此问题的原因以及我们如何解决它？

编辑

只是为了澄清为什么我们不使用内置的 Highcharts 导出，这是为了当我们向 Highcarts 添加额外的 html 时，例如图表上方或下方的额外信息，或图表内的分数例如甜甜圈。我已经更新了 jsfiddle 以反映这一点。

Answer 1

感谢 Pawel Fus 在正确方向上的点头，我们使用 canvg.js 完成了这项工作，它在调用 html2[= 之前暂时用 canvas 替换了 svg 23=].

最后一个问题出现在 svg 中的一些 html 使用 em 来调整字体大小（不幸的是我们的很多模板都这样做）。在将 svg 渲染为 canvas 之前，我们通过将使用 em 的任何内容的字体大小更新为底层像素大小来解决这个问题（请参阅 Get computed font size for DOM element in JS 了解我们如何计算实际字体大小）

下面是点击下载按钮的更新代码

$('#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');
});

在此处查看更新后的 jsfiddle - http://jsfiddle.net/zuvzcgvz/22/

使用 html2canvas 将 highcharts 图表呈现为 pdf 在 IE 和 Firefox 上不起作用

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

javascript

pdf

svg

highcharts

html2canvas