Question

我使用谷歌图表库绘制不同的谷歌图表。绘制图表后，我已下载svg文件为pdf和png。但在单词树图表场景中，我无法下载pdf和png formate。这是图表的链接：

drawCanvas = function (dataURI) {
    $(".download-buttons").css({ 'visibility': 'visible' });

   // imageURI = dataURI;
   var img = new Image();
   img.src = dataURI;
   img.onload = function () {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.clearRect(0, 0, canvas.width, canvas.height);
    canvas.height = img.height;

    canvas.width = img.width;


    context.drawImage(img, 0, 0);
};

我已经使用这种方法下载图像。此代码将svg格式转换为谷歌图表中的pdf和png文件格式，如饼图和其他谷歌图表，但使用此代码我无法转换 wordtree chart svg文件到png和pdf。

为什么在成功保存其他Google图表的同时，word树形图未保存为png或pdf？要么什么是将svg图像保存为png和pdf的替代方法。

Answer 1

html2canvas适用于Google的单词树...

确保包含两者，
html2canvas.js
html2canvas.svg.js

请参阅以下摘录...

＆＃13;

google.charts.load('current', {
  packages:['wordtree']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Phrases'],
    ['cats are better than dogs'],
    ['cats eat kibble'],
    ['cats are better than hamsters'],
    ['cats are awesome'],
    ['cats are people too'],
    ['cats eat mice'],
    ['cats meowing'],
    ['cats in the cradle'],
    ['cats eat mice'],
    ['cats in the cradle lyrics'],
    ['cats eat kibble'],
    ['cats for adoption'],
    ['cats are family'],
    ['cats eat mice'],
    ['cats are better than kittens'],
    ['cats are evil'],
    ['cats are weird'],
    ['cats eat mice'],
  ]);

  var options = {
    wordtree: {
      format: 'implicit',
      word: 'cats'
    }
  };

  var chartContainer = document.getElementById('chart-container');
  var chart = new google.visualization.WordTree(chartContainer);

  google.visualization.events.addListener(chart, 'ready', function () {
    var browserIsIE;
    var domURL;
    var downloadLink;
    var fileName;
    var image;
    var imageContainer;
    var imageURL;
    var svgParent;

    browserIsIE = false || !!document.documentMode;
    fileName = 'WordTree.png';
    svgParent = chartContainer.getElementsByTagName('svg')[0];
    svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
      chartContainer = chartContainer.cloneNode(true);
      domURL = window.URL || window.webkitURL || window;
      imageURL = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
      image = new Image();
      image.src = imageURL;
      $(chartContainer).find('svg').replaceWith(image);
      imageContainer = $('#image-container').get(0);
      $(imageContainer).append(chartContainer);
    }

    html2canvas(chartContainer, {
      allowTaint: true,
      taintTest: false
    }).then(function(canvas) {
      if (browserIsIE) {
        window.navigator.msSaveBlob(canvas.msToBlob(), fileName);
      } else {
        downloadLink = document.createElement('a');
        downloadLink.href = canvas.toDataURL('image/png');
        downloadLink.download = fileName;
        raiseEvent(downloadLink, 'click');
      }
      if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        domURL.revokeObjectURL(imageURL);
        imageContainer.removeChild(chartContainer);
      }
    });
  });

  chart.draw(data, options);

  function raiseEvent(element, eventType) {
    var eventRaised;

    if (document.createEvent) {
      eventRaised = document.createEvent('MouseEvents');
      eventRaised.initEvent(eventType, true, false);
      element.dispatchEvent(eventRaised);
    } else if (document.createEventObject) {
      eventRaised = document.createEventObject();
      element.fireEvent('on' + eventType, eventRaised);
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.svg.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-container"></div>
<div id="image-container"></div>

＆＃13;

注意：在SO，这里运行代码片段时，下载不会弹出检查this fiddle以查看它的实际效果......

如何将svg图像保存为pdf和png？

1 个答案: