el-table导出pdf

您可以使用 `vue-pdf` 插件来导出 `el-table` 为 PDF 格式。以下是一个简单的示例：

1. 首先，确保您已安装了 `vue-pdf` 插件。您可以使用以下命令来安装：

npm install vue-pdf --save

2. 在您的组件中，引入 `vue-pdf` 和 `html2canvas`：

import VuePDF from 'vue-pdf'
import html2canvas from 'html2canvas'

3. 创建一个方法来触发导出 PDF 的操作：

methods: {
  exportToPDF() {
    // 获取 el-table 的 DOM 元素
    const table = document.querySelector('#your-el-table-id')

    // 使用 html2canvas 将 el-table 转为 canvas
    html2canvas(table).then(canvas => {
      // 创建一个新的 PDF 对象
      const pdf = new jsPDF()

      // 计算 canvas 的宽度和高度
      const width = canvas.width
      const height = canvas.height

      // 将 canvas 转为图片，并将其添加到 PDF 中
      const imgData = canvas.toDataURL('image/png')
      pdf.addImage(imgData, 'PNG', 0, 0, width, height)

      // 保存或下载 PDF 文件
      pdf.save('table.pdf')
    })
  }
}

4. 在模板中，添加一个按钮来触发导出 PDF 的方法：

<template>
  <div>
    <el-table :data="tableData" id="your-el-table-id">
      <!-- 表格列定义 -->
    </el-table>
    <button @click="exportToPDF">导出为PDF</button>
  </div>
</template>

请注意，上述示例中的 `#your-el-table-id` 需要替换为您实际使用的 el-table 的 ID。此外，您可能还需要根据您的需求对导出的 PDF 进行样式调整。

希望这对您有所帮助！如果您有任何其他问题，请随时提问。