使用jspdf创建的Pdf文件大小太大 [英] Pdf file size too big created using jspdf

问题描述

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

I am using jspdf for creating PDF inside browser. I am having multiple charts having svg as chart Data. For adding data to pdf I am converting svg to png using canvas and then Base64 Data using canvas.toDataURL method. After all this conversions size of the file created by jspdf is huge (about 50 MB). Below is the code for div of chart data and canvas.

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

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

below is the dimensions for SVG chart load.

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的代码。

now below is the code for conversion of above graph SVG data and adding to 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函数的代码：

this is the code for PDFAfterImageLoad function:

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参数。

I am using png, so imagequality parameter can not be used.

任何人都可以帮我减小文件大小吗？

Can anyone help me decrease the file size?

推荐答案

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

You need to use compress the images in the PDF's that you are generating. Try using Deflate.js and adler32cs.js and use the compress parameter in both jsPDF and addImage functions that you are using. For eg :

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

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

make sure you set the last parameter as 'true' refer to : https://github.com/MrRio/jsPDF/blob/ddbfc0f0250ca908f8061a72fa057116b7613e78/jspdf.js#L146

通过它，您可以清楚地看到最后一个参数是用于启用压缩。

Go through it and you can clearly see that the last parameter is for enabling compression.

还可以使用：

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

而不是

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

您可以选择NONE，FAST，MEDIUM和SLOW，以最适合您的方式。

you can choose between NONE, FAST, MEDIUM and SLOW, whichever suits you best.

这篇关于使用jspdf创建的Pdf文件大小太大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！