首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用jspdf创建的Pdf文件太大

使用jspdf创建的Pdf文件太大
EN

Stack Overflow用户
提问于 2016-06-07 19:10:04
回答 6查看 37.2K关注 0票数 34

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

代码语言:javascript
运行
复制
newdiv = document.createElement("div");
newdiv.className = "big_Con_graph big_Con_graph0";
newdiv.style.height = "0px";
newdiv.id = "big_Con_graph" + id;

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

代码语言:javascript
运行
复制
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的代码。

代码语言:javascript
运行
复制
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函数的代码:

代码语言:javascript
运行
复制
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参数不能使用。

有人能帮我减小文件大小吗?

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2016-06-20 14:12:13

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

代码语言:javascript
运行
复制
var doc = new jsPDF('p', 'pt','a4',true);

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

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

还可以使用:

代码语言:javascript
运行
复制
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');

而不是

代码语言:javascript
运行
复制
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270);

你可以在无、快、中、慢中选择最适合你的。

票数 74
EN

Stack Overflow用户

发布于 2016-12-10 05:13:31

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

代码语言:javascript
运行
复制
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270, undefined,'FAST');

注释

代码语言:javascript
运行
复制
pdf.addImage(png, 'PNG', leftmargin, 120, 485, 270,'','FAST');

否则,第一个图像将替换所有其他图像。

票数 19
EN

Stack Overflow用户

发布于 2020-03-02 09:57:37

太完美了。PDF大小90mb到3mb,具有很好的质量。

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37677750

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档