将页面的内容导出使用html2canvas+jsPDF

第一首先是要引用

 import jsPDF from 'jspdf'   import html2canvas from 'html2canvas'   import PDFJS from 'pdfjs-dist'    PDFJS.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/build/pdf.worker.js'

第二页面点击按钮

第三

 //要导出的div的id     var target = document.getElementById('export_content1')                    html2canvas(target, { dpi: 172 }).then(function(canvas) {           console.log(canvas)           var contentWidth = canvas.width           var contentHeight = canvas.height  //一页pdf显示html页面生成的canvas高度;           var pageHeight = contentWidth / 592.28 * 841.89 //未生成pdf的html页面高度           var leftHeight = contentHeight //pdf页面偏移           var position = 0 //html页面生成的canvas在pdf中图片的宽高（a4纸的尺寸[595.28,841.89]）           var imgWidth = 595.28           var imgHeight = 592.28 / contentWidth * contentHeight            var pageData = canvas.toDataURL('image/jpeg', 1.0)           var pdf = new jsPDF('', 'pt', 'a4')            if (leftHeight < pageHeight) {             pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)           } else {             while (leftHeight > 0) {               pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)               leftHeight -= pageHeight               position -= 841.89 //避免添加空白页               if (leftHeight > 0) {                 pdf.addPage()               }             }           }           pdf.save('导出.pdf')         })