我正在尝试呈现包含谷歌图表的报告页面的 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(最好是客户端)?
如有任何帮助,我们将不胜感激!
最佳答案
大多数可视化 API 图表现在都支持 #getImageURI
方法,该方法返回可用于保存 .png 图像文件的 URI 字符串。以下是有关打印图表的文档,您可以按照这些文档将它们另存为 .png 图像:https://developers.google.com/chart/interactive/docs/printing .将 .png 文件导入 PDF 应该不会造成质量损失。
关于javascript - 图像质量差使用 JSPDF 将 Google Charts 插入 PDF,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22297351/