html2Canvas结合jspdf前端页面生成pdf文件,数量太多生成黑屏文件

705 阅读3分钟

业务需求,需要将页面多张数据表格信息生成pdf文件预览以及保存,选择了html2Canvas和jspdf两个库作为工具。这两个工具包的下载就很简单了。

配置信息官网都有,按照自己需要调整就好。

​编辑

大致也就是如此,将自己需要转换的页面传进来就可以。 ​

 但是在测试中却发现了问题,当我们生成了页面只有十几二十张的时候,都是完整正常的,但是超过一定数量之后确实不行了,如下图所示:

​编辑

​​

一下给自己整懵逼了,因为报告数量是可以增加的,所以最后需要生成的数量也是很多,那这看肯定就不行了。

但是查看了自己cavans和jspdf的配置却找不到问题,最后只能另辟蹊径了。在使用的时候发现好像是一次性生成太多导致的压力太大,生成渲染失败了。

于是决定在获取dom之后做操作,不一次性给他传进去。便有了一下的操作。

​编辑

如图,在获取到所有的需要生成的页面元素之后,对他进行了截取,我这里是每次将10张去生成。每次生成都会有一个base64的编码,最后同意存在一个数组里面。这样即使有五十六十张也不会因为压力太大渲染失败了。那这样就还差最后一步,我有好几个在数组里面,肯定不能让客户下载的时候还点击五六次下载,最后还要自己整理报告顺序。

那最后一步就是将分段生成的pdf和成一个大的pdf了。

​​

 在拼接的时候也尝试了不同的方法,直接拼接啊,toString什么的,还有Blob转二进制流在拼接啊,都尝试了,但是最后还是不行。其中还有一个问题,因为每次分段生成,那么那个base64编码已经是一个完成的编码,他的前缀和结尾都是一个完整的文件的编码。这也是需要处理的。

最后发现了一个新的库可以帮助我们将已经完成的编码在进行合并生成一个完整的最大的方法。

​编辑

如图;npm install pdf-lib下载即可。

下载之后就可以继续了,

​​

 ​编辑

​编辑

创建一个新的pdf,将我们之前的传入合成即可,最后将新的编码return出去,即可用于预览和下载了。

到此问题已经解决。最后本人的方法可能有些复杂啰嗦了,因为html2Canvas和jspdf并没有对生成数量有什么限制,可能是我的配置还有完善的地方,欢迎大家指正,如果能帮到你也是非常荣幸。