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

概述第一首先是要引用 import jsPDF from ‘jspdf‘ import html2canvas from ‘html2canvas‘ import PDFJS from ‘pdfjs-dist‘ PDFJS.GlobalWorkerOptions.workerSrc = ‘pdfjs-dist/build/pdf.worker.js‘ 第二页面点击按钮 第三

第一首先是要引用

 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,imgWIDth,imgHeight)          } else {            while (leftHeight > 0) {              pdf.addImage(pageData,position,imgHeight)              leftHeight -= pageHeight              position -= 841.89//避免添加空白页              if (leftHeight > 0) {                pdf.addPage()              }            }          }          pdf.save(‘导出.pdf‘)        })

总结

以上是内存溢出为你收集整理的将页面的内容导出使用html2canvas+jsPDF全部内容，希望文章能够帮你解决将页面的内容导出使用html2canvas+jsPDF所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。