# 1、插件 "jspdf": "^2.3.0", "html2canvas": "^1.4.1", # 2、场景网页html生成A4大小分页的pdf # 3、代码 ```

导出 ``` ``` import htmlToPdf from './export' 所需的js文件 exportPDF() { const divList = document.getElementsByClassName('pdfpage') const name = '成绩单' + '_' + '_统计图表' htmlToPdf.downloadPDF(this.$refs.exportPDF, name, true, divList) }, ``` ``` ##### export.js import html2canvas from '@nidi/html2canvas' import JsPDF from 'jspdf' /** * @param ele 要生成 pdf 的DOM元素（容器） * @param padfName PDF文件生成后的文件名字 * */ function downloadPDF(ele, pdfName, ddd = false, list = []) { let eleW = ele.offsetWidth// 获得该容器的宽 let eleH = ele.offsetHeight// 获得该容器的高 let eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离 let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离 var canvas = document.createElement('canvas') var abs = 0 let win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度（不包含滚动条） let win_out = window.innerWidth // 获得当前窗口的宽度（包含滚动条） if (win_out > win_in) { // abs = (win_o - win_i)/2; // 获得滚动条长度的一半 abs = (win_out - win_in) / 2 // 获得滚动条宽度的一半 // console.log(a, '新abs'); } canvas.width = eleW * 2 // 将画布宽&&高放大两倍 canvas.height = eleH * 2 var context = canvas.getContext('2d') context.scale(2, 2) context.translate(-eleOffsetLeft - abs, -eleOffsetTop) // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此 // translate的时候，要把这个差值去掉 if (ddd) { return func(list, pdfName) } //可自动分页（图表会被分页） setTimeout(()=>{ html2canvas(ele, { dpi: 300, // allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的 useCORS: true //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。 }).then((canvas) => { var contentWidth = canvas.width var contentHeight = canvas.height //一页pdf显示html页面生成的canvas高度; var pageHeight = contentWidth / 841.89 * 595.28 //未生成pdf的html页面高度 var leftHeight = contentHeight //页面偏移 var position = 0 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 var imgWidth = 595.28 var imgHeight = 595.28 / contentWidth * contentHeight var pageData = canvas.toDataURL('image/jpeg', 1.0) var pdf = new JsPDF('', 'pt', 'a4') //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89) //当内容未超过pdf一页显示的范围，无需分页 console.log(imgWidth, imgHeight,'imgWidth, imgHeight','44455kkkk') if (leftHeight < pageHeight) { //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示； pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight); } else { // 分页 if (ddd) { for (let i = 0; i < list.length; i++) { pdf.addPage() } } while (leftHeight > 0) { pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight position -= 841.89 //避免添加空白页 if (leftHeight > 0) { pdf.addPage() } } } //可动态生成 pdf.save(pdfName) }) },2000) } //可手动分页 async function func(list = [], pdfName) { let pdf = new JsPDF('l', 'pt', 'a4') for (let i = 0, l = list.length; i < l; i++) { let abs = 0 let e = list[i] let eleW = list[i].offsetWidth let eleH = list[i].offsetHeight let eleOffsetTop = list[i].offsetTop let eleOffsetLeft = list[i].offsetLeft let c = document.createElement('canvas') c.width = eleW * 2 c.height = eleH * 2 let ctx = c.getContext('2d') ctx.scale(2, 2) ctx.translate(-eleOffsetLeft - abs, -eleOffsetTop) setTimeout(()=>{ html2canvas(e, { dpi: 300, background: '#fff', logging: true, useCORS: true, imageTimeout: 60000, scrollX: 0, scrollY: 0, scale:2, // async:false,//同步执行 }).then((c) => { let contentWidth = c.width let contentHeight = c.height // 一页pdf显示html页面生成的canvas高度; let pageHeight = contentWidth / 841.89 * 595.28 // 未生成pdf的html页面高度 let leftHeight = contentHeight // 页面偏移 let position = 0 // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 var pdfX = (contentWidth + 10) / 2 * 0.75 var pdfY = (contentHeight + 500) / 2 * 0.75 // 500为底部留白 // 设置内容图片的尺寸，img是pt单位 var imgWidth = pdfX; var imgHeight = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离 let pageData = c.toDataURL('image/jpeg', 1.0) console.log(pageData) if (leftHeight < pageHeight) { pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight) } else { while (leftHeight > 0) { // arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度 pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight); leftHeight -= pageHeight position -= 595.28 // 避免添加空白页 if (leftHeight > 20) { // 注② pdf.addPage() } } } if (i < l - 1) { pdf.addPage() } else { return pdf.save(pdfName) } }) },i * 100) } } export default { downloadPDF } ``` # 4、问题 1.导出pdf数量较少时，可以正常显示。过多时，显示为全空白刚开始以为是文件太大导致的，因此使用了pdf.output('datauristring')，发现并没有用。解决：一直找不到原因，网上关于这个相关问题的解决方案也不是很多，最后在github官网找到最优解决方案。官网有一个issue：# JSPDF, Not able to download pdf with larger dataset: Browser crashes after sometime. #3481 导致的原因canvas过长导致的，给出的解决方案是将一个html元素进行拆分合并 https://github.com/parallax/jsPDF/issues/3481#issuecomment-1251167723 2.导出以后会发生内容跨页解决：内容的高度才为PDF页面的实际高度，判断分页的依据应该以内容高度为准，如果canvas的高度小于一页pdf显示html页面生成的canvas高度;就不进行分页，正常使用addImage方法，否则进行分页处理。 3.导出内容被裁减对addImage所需的高度宽度进行修改 # 5、循环问题在最后进行大量测试以后，发现在数据量较小的时候可以正常导出，但是数据量较大的时候，会偶尔出现导出的 pdf数量丢失，在调试过程中发现转换的html图片数量正常，但是生成pdf后，数量可能会有所丢失。最终在调试过程中发现是因为js事件轮询机制导致，通过循环中同步调用异步的方法解决。 # 6、其他方案使用了浏览器自带的方案：window.print() 缺点：数量太多时，加载速度太慢 # 参考博客及文档 https://juejin.cn/post/7138370283739545613 https://artskydj.github.io/jsPDF/docs/index.html