赞
踩
最近有个需求需要前端直接将html页面导出为pdf,在此过程中遇到了各种各样的问题,由于本人是服务端,硬着头皮在做前端,第一次使用vue,第一次做html导出为pdf,做此记录希望给和我一样经历的人一点帮助。
html导出为pdf的方式:html2canvas+jsPDF,具体代码就不上了,百度网上一大堆,但是在网上百度的方法你在使用的过程中可能会遇到以下问题。
再说问题前我们先来简单了解一下html2canvas+jsPDF是如何将html转为pdf的。html2canvas:将指定的dom节点转 为图片(百度html转pdf时,你一定会看到let imgBase64 = canvas.toDataURL('image/jpeg', 1.0)这段代码,imgBase64 就是图片对应的base64编码),该方式是通过截图实现的。jsPDF:将图片添加到pdf中(pdf.addImage(imgBase64, 'JPEG', 0, 0, imgWidth, imgHeight))。
遇到的问题总结:
问题1:
导出的pdf很模糊。
解决方法:设置画布(canvas)的dpi为300,scale为2,上个伪代码:
html2canvas(ele, {
useCORS: true,//允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
dpi: 300, // 提升导出的文件的分辨率
scale: 2 // 提升导出的文件的分辨率
}).then(async canvas => {})
问题2:
需要导出的dom节点的高度和宽度是大于当前浏览器的可视窗口时,导出后发现导出的内容只包含了可视窗口的内容。
解决方法:检查你在设置画布(canvas)的宽高时是否是通过获取dom元素的scrollHeight(dom元素的高度,包含纵向滚动条的高度),scrollWidth(dom元素的宽度,包含横向滚动条的款度)。
问题3:
导出的pdf,某个模块被截断了,eg:一个table被分到了两个页面。
解决方法:可参考该博客,该博主已经给出了代码html转pdf分页问题_qq_251025116的博客-CSDN博客_html转pdf分页
问题4:
导出的pdf部分元素缺失,这个问题只会在pdf的内容过大时出现,我是在导出的pdf在5M左右时出现的,当你确定你的缺失的元素是在你要导出的dom内时,若导出的pdf还是有部分内容缺失那你大概率是和我碰到一样的问题了。
解决方法:由原来的一次截图,换为分多次截图,将原来dom里面的元素进行克隆放进多个div中,由原来的对dom进行截图换为循环对多个div进行截图即可。(如果看不懂这个处理方式,请先了解html2canvas+jsPDF是如何将html转为pdf的)
在你循环进行截图时有可能出现最后pdf里面的内容顺序是错乱的,出现这个问题是因为第一个div转为的图片添加到pdf中还未添加完,第二个div就已经截图完也开始向pdf添加图片了。此时需要先把每个截图出来的图片信息收集到一起,判断全部截图收集完后再向pdf中添加图片:上个伪代码
let imgDataMap = new Map();
html2canvas(ele, {
useCORS: true,//允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
dpi: 300, // 提升导出的文件的分辨率
scale: 2 // 提升导出的文件的分辨率
}).then(async canvas => {
let imgDataArray = [];
if (leftHeight > = pageHeight){
while (leftHeight >= pageHeight) {
leftHeight -= pageHeight;
let imgData = {};
imgData.imgBase64 = imgBase64;
imgData.position= position;
imgData.imgWidth= imgWidth;
imgData.imgHeight= imgHeight;
position -= this.A4_HEIFHT;
}
}
imgDataMap.set(“你的key”, imgDataArray);
if ("所有截图收集齐了") {
// 循环imgDataMap里面的数据,往pdf添加图片
// pdf.addImage(imgBase64, 'JPEG', 0, 0, imgWidth, imgHeight);
}
})
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。