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

我们使用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以反映这一点.

感谢Pawel Fus朝着正确的方向点头,我们使用canvg.js工作,在调用html2canvas之前暂时用画布替换了svg.

最后一个问题出现在svg中的一些html使用em来调整字体大小(不幸的是我们很多模板都这样做).我们通过在将svg渲染到画布之前更新使用em到底层像素大小的任何字体大小来解决这个问题(请参阅获取JS中DOM元素的计算字体大小以了解我们如何计算实际字体大小)

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

$('#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/