使用 jspdf 创建的 PDF 文件太大

Question

我正在使用 jspdf 在浏览器中创建 PDF。我有多个图表将 svg 作为图表数据。为了将数据添加到 pdf，我使用 canvas 将 svg 转换为 png，然后使用 canvas.toDataURL 方法将 Base64 数据转换。毕竟 jspdf 创建的文件的这种转换大小是巨大的（大约 50 MB）。下面是图表数据和画布的 div 代码。

 newdiv = document.createElement("div");
newdiv.className = "big_Con_graph big_Con_graph0";
newdiv.style.height = "0px";
newdiv.id = "big_Con_graph" + id;

下面是 SVG 图表加载的尺寸。

 document.getElementById("big_Con_graph" + id).style.display = "block";
var big_chartReference = FusionCharts("big_myChartId"+id);
if(big_chartReference != null){
    big_chartReference.dispose();
}
var big_width = "1088";
var big_height = "604";

现在下面是转换上述图形 SVG 数据并添加到 PDF 的代码。

 var elem_graph = $($('.big_Con_graph,big_Con_graph0')[count]).clone(true);
svgString = $(elem_graph).find("span").html();
var img = document.createElement('img');
var DOMURL = self.URL || self.webkitURL || self;
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = pdfAfterImageLoad(img,pdf,imgLoadSequence,DOMURL,totalReports,reportName);
img.src = url;

这是 PDFAfterImageLoad 函数的代码：

 var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var png = canvas.toDataURL("image/png");
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);

我正在使用 png，因此无法使用 imagequality 参数。

谁能帮我减小文件大小？

原文由 Asha Koshti 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要压缩正在生成的 PDF 中的图像。尝试使用 Deflate.js 和 adler32cs.js，并在您使用的 jsPDF 和 addImage 函数中使用压缩参数。例如：

 var doc = new jsPDF('p', 'pt','a4',true);

确保将最后一个参数设置为“true”，请参阅： https ://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146

走一遍可以清楚的看到最后一个参数是开启压缩的。

也可以使用：

 pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');

代替

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);

您可以选择最适合您的无、快速、中速和慢速。

原文由 hkm93 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果将多个图像添加到一个文档中，请使用

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270, undefined,'FAST');

不是

pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');

否则第一张图片将替换所有其他图片。

原文由 Andrew Hudik 发布，翻译遵循 CC BY-SA 3.0 许可协议