将谷歌图保存为矢量图像


Save GoogleGraph as Vector Image

我正在动态创建一个PDF分析文档。图形等是使用Google Graph API创建的。所以我正在做的是将图表转换为图像,然后将它们加载到网页中,然后使用 mpdf (http://www.mpdf1.com/mpdf/index.php) 库将其转换为 PDF。

这是我遵循的教程:http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html,我已经将代码更正为:

function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);

canvas.setAttribute(
    'style',
    'position: absolute; ' +
    'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
    'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData;
 }

根据此线程的建议:将Google图表另存为图像

但是,输出的图像是 PNG 格式,我需要它是 SVG,我认为这可能只是更改此行的情况:

var imgData = canvas.toDataURL("image/png");

自:

var imgData = canvas.toDataURL("image/svg");

但是这不起作用,任何人都可以指出我正确的方向吗? 或者,如果有更好且免费的方法将Google图表转换为pdf,我将非常乐意探索其他选择。

我认为var "svg"包含SVG。您不需要转换它。所以:

function getSvgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
return svg;
}