最近有个需求需要前端直接将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)；

        }        

})