element ui 导出pdf方法-CSDN博客

本文链接：https://blog.csdn.net/qq_58638897/article/details/126938991

使用html2Canvas和JsPDF库，转化为图片后保存PDF。

安装html2canvas库 npm install html2canvas
安装jspdf库 npm install jspdf

3.新建js文件，复制代码即可 htmlToPdf.js


import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

const htmlToPdf = {
  getPdf (title) {
    html2Canvas(document.querySelector('#pdfDom'), {
      allowTaint: true
    }).then(canvas => {
      const contentWidth = canvas.width
      const contentHeight = canvas.height
      const pageHeight = contentWidth / 592.28 * 841.89
      let leftHeight = contentHeight
      let position = 0
      const imgWidth = 595.28
      const imgHeight = 592.28 / contentWidth * contentHeight
      const pageData = canvas.toDataURL('image/jpeg', 1.0)
      const 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(title + '.pdf')
    })
  }
}

export default htmlToPdf

4.在我们需要的vue组件内引入js文件

4.给导出按钮点击事件

    // 导出pdf  exportPdf为导出按钮单击事件
    exportPdf () {
      htmlToPdf.getPdf('导出的pdf')
    },