web-dev-qa-db-ja.com

html2canvasを使用してハイチャートチャートをPDFにレンダリングすることは、IEおよびFirefoxでは機能しません

Html2canvas.jsとhtml2canvas.svg.js（バージョン0.5.0 beta1）とhighcharts.jsを使用して、ドーナツグラフをpdfにダウンロードしています。

これはChromeでは期待どおりに機能しますが、IEおよびFirefoxでは機能しません。IEではグラフが正しくレンダリングされず、Firefoxでは次の場所でレンダリングされません。すべて。

以下は、Chrome、IE、Firefox）でのダウンロードのスクリーンショットです。

ChromeChrome

[〜＃〜] ie [〜＃〜]（エッジ） IE

Firefoxenter image description here

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エクスポートを使用しない理由を明確にするために、これは、チャートの上または下の追加情報やドーナツ内のスコアなど、Highcartに追加のhtmlを追加する場合に使用します。これを反映するようにjsfiddleを更新しました。

javascriptpdfsvghighchartshtml2canvas
8
Rob

正しい方向にうなずいてくれたPawelFusのおかげで、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/

14
Rob