Vue - 详细实现将复杂 table 表格导出到 Excel(xls) 文件，支持原生表格、ElementUI 复杂表格、Ant Design Vue 复杂表格（将前端表格“所见所得“导出）

<template>
  <div>
    <el-button @click="exportTable">导出表格</el-button>
    <el-table
      ref="elTable"
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '李小虎', address: '上海市普陀区金沙江路 1517 弄' },
        // ...更多数据
      ]
    };
  },
  methods: {
    exportTable() {
      // 使用 Blob 对象和导出库（例如 XLSX）来导出表格
      import('xlsx').then(xlsx => {
        const elTable = this.$refs.elTable;
        const ws = xlsx.utils.table_to_sheet(elTable.$el);
        const wb = xlsx.utils.book_new();
        xlsx.utils.book_append_sheet(wb, ws, 'Sheet1');
        xlsx.writeFile(wb, 'table.xls');
      }).catch(error => {
        console.error('导出表格失败:', error);
      });
    }
  }
};
</script>

这段代码使用了 xlsx 库来处理 Excel 文件的创建和导出。在 Vue 组件中，我们定义了一个按钮，用户可以点击它来触发表格导出的功能。在 exportTable 方法中，我们通过 xlsx 相关函数将表格转换为工作表，然后添加到工作簿中，并最终写入文件。这里使用了异步导入 xlsx 库来避免在加载时阻塞主线程。