使用html2canvas将高图表转换为pdf不适用于IE和Firefox [英] Using html2canvas to render a highcharts chart to pdf doesn't work on IE and Firefox

问题描述

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

在Chrome浏览器中按预期工作，但在IE和Firefox中无法正常工作。在IE中，图表渲染不正确，在Firefox中根本不渲染。

以下是Chrome，IE和Firefox中的下载截图。 b
$ b

Chrome

Firefox

我用来做html2canvas的代码如下：

<$ p $ （$ b $ image / png）{
onrendered：function（canvas）{
var $ {code> html2canvas（$（＃container），{
' ）;
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'）; 
 
 //用临时画布替换所有svgs 
 svgElements.each（function（）{
 var canvas，xml; 
 
 // canvg无法很好地处理em字体大小，因此请以像素为单位查找计算的大小并将其替换为元素
 $ .each （$（this）.find（'[style * = em]'），function（index，el）{
 $（this）.css（'font-size'，getStyle（el，'font-size '））; 
}）; 
 
 canvas = document.createElement（canvas）; 
 canvas.className =screenShotTempCanvas; 
 //将SVG转换为XML字符串
 xml =（new XMLSerializer（））。serializeToString（this）; 
 
 //删除名称空间，因为IE抛出错误
 xml = xml.replace（/ xmlns = \http：\ / \ / www\.w3\ .org \ / 2000\ / svg\/，''）; 
 
 //将SVG绘制到画布上
 canvg（canvas，xml）; 
 $（canvas）.insertAfter（this）; 
 //隐藏SVG元素
 $（this）.attr（'class'，'tempHide'）; 
 $（this）.hide（）; 
}）; 
 
 $ b $ 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/

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.

解决方案

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/

这篇关于使用html2canvas将高图表转换为pdf不适用于IE和Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！