elementui 表格使用html2pdf

Element UI是一个基于Vue.js的开源UI组件库，主要用于构建用户界面。要将Element UI的表格内容转换成PDF文件，可以借助第三方库如html2canvas或jsPDF等。以下是一个基本步骤：

1. 引入依赖：首先需要引入html2pdf相关的JavaScript库，例如`html2canvas`和`jspdf-autotable`，它们可以帮助我们捕捉网页并生成PDF。

npm install html2canvas jspdf jspdf-autotable --save

2. 创建HTML元素：确保你的Element UI表格已经正确地渲染在DOM上，并且包含了所有数据。

<el-table ref="table" :data="tableData">
  <!-- 表头和行 -->
</el-table>

3. 使用html2pdf转换：在你需要生成PDF的地方，通过js代码调用`html2canvas`获取屏幕快照，然后转换成PDF。

import { html2canvas } from 'html2canvas';
import jsPDF from 'jspdf';

export default {
  methods: {
    exportToPdf() {
      const table = this.$refs.table;
      html2canvas(table.$el)
        .then((canvas) => {
          const imgData = canvas.toDataURL('image/png');
          // 使用imgData创建新的PDF页面
          const doc = new jsPDF();
          doc.addImage(imgData, 'PNG', 10, 10);
          // 添加更多PDF操作，如添加页眉、页脚...
          doc.save('table.pdf'); // 下载PDF
        })
        .catch((error) => {
          console.error('Error converting to PDF:', error);
        });
    }
  }
}