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秒就可以了