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

最新推荐文章于 2025-06-19 19:58:33 发布

昆山一百计算机有限公司

最新推荐文章于 2025-06-19 19:58:33 发布

阅读量443

点赞数

CC 4.0 BY-SA版权

文章标签：前端 excel 数学建模

本文链接：https://blog.csdn.net/ekcchina/article/details/130887437

该示例展示了如何在前端使用XLSX库将表格数据转换成Excel格式。通过获取表格实例，格式化和转换数据，然后利用Blob对象和浏览器兼容性处理来实现文件下载，无需后端支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 表格的功能，无需依赖后端。