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

Question

我已经使用谷歌图表库来绘制不同的谷歌图表。绘制图表后，我已经将svg文件下载为pdf和png。 但是在单词树图的情况下，我无法下载pdf和png格式。 这是图表的链接：

词树图

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格式在饼图和其他google图表等Google图表中转换为pdf和png文件格式，但是使用此代码我无法将wordtree图表svg文件转换为png和pdf。

为什么在其他Google图表成功保存的情况下，词树图表未保存为png或pdf？ 或将svg图像另存为png和pdf的另一种方法是什么。

Answer 1

html2canvas可以在Google的单词树上使用...

确保同时包括两者
html2canvas.js
html2canvas.svg.js

请参阅以下代码段...

 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); } } }); 

 <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上运行此代码段时，下载不会弹出，
检查这个小提琴以查看其作用...