前端实现将Element Plus表格导出为Excel表格

598 阅读1分钟
import { export_json_to_excel } from '@/utils/excel'; // 导出函数,可以根据实际项目结构进行引入
    import XLSX from 'xlsx'; // xlsx 库

    exportExcel() {
      const tableData = this.$refs.table.getData(); // 获取表格数据,可以根据实际情况使用 ref 或其他方式获取表格实例
      const jsonData = this.formatTableData(tableData); // 格式化表格数据为符合导出要求的 JSON 数据,可以根据实际需求编写格式化逻辑
      const excelData = this.convertDataToExcel(jsonData); // 将 JSON 数据转换为 Excel 数据,可以根据实际需求编写转换逻辑
      const worksheet = XLSX.utils.json_to_sheet(excelData);

      const workbook = {
        Sheets: { 'data': worksheet },
        SheetNames: ['data']
      };

      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
      const fileName = 'table_data.xlsx';

      if (navigator.msSaveBlob) {
        // 兼容处理(适用于IE和Edge)
        navigator.msSaveBlob(blob, fileName);
      } else {
        // 创建下载链接并模拟点击下载
        const link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        // 释放 URL 对象
        window.URL.revokeObjectURL(link.href);
      }
    }

在这个示例中,我们通过 XLSX.write 方法生成了 Excel 文件的二进制数据,并创建了一个 Blob 对象。然后,我们根据浏览器的兼容性进行了处理:如果浏览器支持 navigator.msSaveBlob,则使用该方法直接下载文件;否则,创建一个下载链接,并模拟点击下载。

请注意,示例中的 formatTableData 和 convertDataToExcel 函数需要根据实际需求编写,以适应你的项目结构和数据格式。

总而言之,前端可以使用类似的方式实现将 Element Plus 表格导出为 Excel 表格的功能,无需依赖后端。

作者:邵文俊