javascript - 图像质量差使用 JSPDF 将 Google Charts 插入 PDF

Question

我正在尝试呈现包含谷歌图表的报告页面的 pdf View 以显示我的数据。目前我要将图表转换为 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(最好是客户端)？

如有任何帮助，我们将不胜感激!

Answer 1

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