vue 导出pdf文件

可以使用jsPDF和html2canvas两个库来实现在Vue中导出PDF文件。使用html2canvas将要导出的HTML元素转为Canvas，使用jsPDF将Canvas转换为PDF文件进行下载或预览。以下是一个简单的示例代码：

1. 安装jsPDF和html2canvas库

npm install jspdf html2canvas

2. 在Vue组件中引入jsPDF和html2canvas

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

3. 在Vue组件中定义导出PDF的方法

export default {
  data() {
    return {
      // 定义要导出为PDF的HTML元素选择器
      selector: '#pdf-content'
    }
  },
  methods: {
    // 导出PDF方法
    exportPDF() {
      // 获取要导出为PDF的HTML元素
      const pdfContent = document.querySelector(this.selector)
      // 调用html2canvas将HTML元素转换为Canvas
      html2canvas(pdfContent).then(canvas => {
        // 创建jsPDF实例
        const pdf = new jsPDF('p', 'pt', 'a4')
        // 获取Canvas的宽高
        const canvasWidth = canvas.width
        const canvasHeight = canvas.height
        // 将Canvas转换为PNG图片
        const imgData = canvas.toDataURL('image/png')
        // 添加图片到PDF并设置图片宽高为Canvas的宽高
        pdf.addImage(imgData, 'PNG', 0, 0, canvasWidth, canvasHeight)
        // 保存或预览PDF文件
        pdf.save('export.pdf')
        // 或者打开一个新窗口显示PDF文件
        // const pdfWindow = window.open('')
        // pdfWindow.document.write('<iframe width="100%" height="100%" src="' + pdf.output('datauristring') + '"></iframe>')
      })
    }
  }
}

4. 在HTML模板中添加要导出为PDF的HTML元素以及导出按钮

<template>
  <div>
    <!-- 要导出为PDF的HTML元素 -->
    <div id="pdf-content">
      ...
    </div>

    <!-- 导出按钮 -->
    <button @click="exportPDF()">导出PDF</button>
  </div>
</template>

需要注意的是，导出PDF的HTML元素必须符合jsPDF和html2canvas库的要求，例如样式必须在HTML中定义，不能使用外部CSS，否则可能导致导出的PDF样式不正确。