使用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到底層像素大小的任何字體大小來解決這個問題（請參閱獲取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/