vue html导出为pdf（解决分页问题+模糊问题）

最近有个需求需要前端直接将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添加图片了。此时需要在第二个div截图完向pdf添加图片的方法设置等待时间：上个伪代码

let imgBase64 = canvas.toDataURL('image/jpeg', 1.0)

setInterval(()=>{

pdf.addImage(imgBase64, 'JPEG', 0, 0, imgWidth, imgHeight)；

}, 3000);
我这边调试设置等待3秒就可以了

vue html导出为pdf（解决分页问题+模糊问题）相关推荐

Markdown文档如何分页以及导出的PDF如何分页
markdown中,在需要分页的地方插入以下代码: <div STYLE="page-break-after: always;"></div> 如图所示: ...
vue base64导出（pdfexcel ）打印（pdf）
vue base64导出(pdf和excel ) 打印(pdf) 使用场景 1.在src/utils下创建filePrintAndDownload.js文件 2.在页面中使用 3.可用于测试的best ...
vue实现pdf导出，解决生成canvas模糊等问题
vue实现pdf导出,解决生成canvas模糊等问题参考文章: (1)vue实现pdf导出,解决生成canvas模糊等问题 (2)https://www.cnblogs.com/jsonYoung/ ...
vue实现HTML转PDF (已解决清晰、页边距、图片跨域导出等问题)
最近有需求做简历打印的功能,就又花时间研究了一下html转图片导出,里面牵扯到多页pdf导出时的分页和页边距问题,清晰度问题以及图片跨域问题等.我们一个一个来解决. 一.先说HTML转PDF的实现方法 ...
vue页面导出pdf
vue页面导出pdf 下载依赖 yarn add html2canvas // 将页面html转换成图片 yarn add jspdf // 将图片生成pdf 定义全局函数,创建htmlToPdf.j ...
vue 导出为pdf
1.安装依赖包 npm install --save html2canvas npm install jspdf --save 2.代码部分 3.导出方法 exportPdf() {html2Canv ...
vue 前端导出PDF文件学起来
首先用 npm 引入 pdf 需要的依赖,之后需要进行二次封装,才能应用 npm install html2canvas npm install jspdf --------------------- ...
页面截图导出为PDF，以及PDF强行截断分页问题的处理
页面截图导出为PDF,以及PDF强行截断分页问题的处理需求将页面内容截图导出为PDF文件,如果有高度过高的表格或图片,尽量不截断而是放在下一页展示. 思路 1.将需要导出的dom,都用一个特殊的类 ...
excel转pdf（解决导出的pdf和excel格式不一致问题）
excel转pdf(解决导出的pdf和excel格式不一致问题) public static boolean getLicense() throws IOException {boolean resu ...
解决markdownPad2导出的pdf显示不出图片问题
markdown 工具 markdown使用说明: 解决markdownPad2导出的pdf显示不出图片问题: 错误写法: ![Alt text](/pic/webrtc_jiegoutu.png) ...

vue html导出为pdf（解决分页问题+模糊问题）

vue html导出为pdf（解决分页问题+模糊问题）相关推荐

最新文章

热门文章