vue el-table 前端js实现导出数据为Excel

在Vue项目中，可以使用第三方库xlsx来处理Excel文件的导入导出，以及file-saver来保存文件。以下是实现导出Excel的示例代码：

1. 安装所需依赖：

npm install xlsx file-saver

2. 在Vue组件中使用这些库来导出表格数据为Excel文件：

<template>
  <div>
    <el-table
      ref="elTable"
      :data="tableData"
      style="width: 100%">
      <!-- 表格列定义 -->
    </el-table>
    <el-button @click="exportToExcel">导出为Excel</el-button>
  </div>
</template>
 
<script>
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
 
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ]
    };
  },
  methods: {
    exportToExcel() {
      // 通过ref获取表格DOM元素
      const elTable = this.$refs.elTable;
      // 获取表格数据
      const wb = XLSX.utils.table_to_book(elTable.$el);
      // 生成Excel文件
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        // 使用Blob保存文件
        const blob = new Blob([wbout], { type: 'application/octet-stream' });
        saveAs(blob, 'export.xlsx');
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e, wbout);
      }
      return wbout;
    }
  }
};
</script>

在上述代码中，我们定义了一个exportToExcel方法，该方法通过this.$refs.elTable获取表格的DOM元素，然后使用XLSX.utils.table_to_book将表格转换为工作簿格式。接着，使用XLSX.write方法将工作簿写成一个二进制数组，并通过Blob对象和file-saver库保存为Excel文件。这样，用户就可以点击按钮将表格数据导出为Excel文件了。