使用html2canvas将高图图表呈现为pdf并不适用于IE和Firefox

Question

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

这在Chrome中可以正常运行，但在IE和Firefox中这不起作用。在IE中，图表渲染不正确，在Firefox中根本不渲染。

以下是Chrome，IE和Firefox下载的截图

铬

IE （边缘）

火狐

我用来执行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工作，在调用html2canvas之前暂时用画布替换了svg。

最后一个问题出现在svg中的一些html使用em来调整字体大小（不幸的是我们很多模板都这样做）。我们通过在将svg渲染到画布之前更新使用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/