使用 jspdf 创建的 Pdf 文件太大

2022-01-17 00:00:00 base64 javascript fusioncharts html5-canvas jspdf

我正在使用 jspdf 在浏览器中创建 PDF.我有多个将 svg 作为图表数据的图表.为了将数据添加到 pdf，我使用画布将 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 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.

相关文章