将页面的内容导出使用html2canvas+jsPDF
阅读原文时间:2023年07月14日阅读:1

第一首先是要引用

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')
})