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

作者:邵文俊

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐