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

Question

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

Word Tree chart

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 图表 svg 文件到 png 和 pdf。

为什么单词树形图没有保存为 png 或 pdf 而其他 google 图表保存成功？ 要么 将 svg 图像保存为 png 和 pdf 的另一种方法是什么。

Answer 1

html2canvas 将适用于谷歌的词树...

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

看下面的sn-p...

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 (!browserIsIE) {
      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 (!browserIsIE) {
        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);
    }
  }
});

<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>

注意：在 SO 上运行 sn-p 时不会弹出下载，
检查this fiddle 以查看它的实际效果...