2

我正在尝试呈现包含谷歌图表的报告页面的 pdf 视图以显示我的数据。目前我正在将图表转换为 url 编码的 JPEG。此阶段的图像质量仍然很好，但是一旦我使用 JSPDF 将其添加到 pdf 文档中，图像质量就会严重降低。

这是我当前方法的 jsfiddle：http: //jsfiddle.net/5c5YX/3/

function getImgData(chartContainer) {
    var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
    var svg = chartArea.innerHTML;
    var chartDoc = chartContainer.ownerDocument;
    var canvas = chartDoc.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;');
    chartDoc.body.appendChild(canvas);
    canvg(canvas, svg);
    var imgData = canvas.toDataURL('image/JPEG');
    doc.addImage(imgData, "JPEG", 10,10); 
    doc.addImage(imgData, "JPEG", 10,100); 
    canvas.parentNode.removeChild(canvas);
    return imgData;
  }

有谁知道对此的修复或这样做的原因？或者，如果不是；有没有不同的方法可以呈现包含谷歌图表数据的pdf（最好是客户端）？

任何帮助将不胜感激！

4

1 回答 1

1

大多数 Visualization API 图表现在都支持该#getImageURI方法，该方法返回一个 URI 字符串，您可以使用该字符串保存 .png 图像文件。以下是有关打印图表的文档，您可以按照这些文档将它们保存为 .png 图像：https ://developers.google.com/chart/interactive/docs/printing 。将 .png 文件导入 PDF 不应有质量损失。

于 2014-03-10T15:55:04.960 回答