将页面的内容导出使用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')
        })

 

转载于:https://www.cnblogs.com/zhenga/p/11003277.html