vue 导出 pdf 文件 封装方法

下面是一个简单的封装方法，使用 jsPDF 和 html2canvas 库，将 Vue 组件转化为 PDF 文件并进行下载：

import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

export default {
  methods: {
    exportPDF() {
      const doc = new jsPDF()
      const targetDom = this.$refs.pdfContent
      html2canvas(targetDom).then(canvas => {
        const imgData = canvas.toDataURL('image/png')
        const imgWidth = 200
        const pageHeight = 295
        const imgHeight = canvas.height * imgWidth / canvas.width
        let heightLeft = imgHeight
        let position = 0
        doc.addImage(imgData, 'PNG', 5, 5, imgWidth, imgHeight)
        heightLeft -= pageHeight

        while (heightLeft >= 0) {
          position = heightLeft - imgHeight
          doc.addPage()
          doc.addImage(imgData, 'PNG', 5, position + 5, imgWidth, imgHeight)
          heightLeft -= pageHeight
        }

        doc.save('report.pdf')
      })
    }
  }
}

将需要导出的内容放在一个 div 容器中，并设置 ref 属性为 `pdfContent`，如下所示：

<template>
  <div ref="pdfContent">
    <!-- 需要导出的内容 -->
  </div>
  <button @click="exportPDF">导出 PDF</button>
</template>

点击导出按钮即可将内容导出为 PDF 文件。需要注意的是，该方法只适用于简单的文本和图片导出，如需导出复杂的图表等内容，可能需要使用更为专业的 PDF 导出库。