【Vue】vue3 中如何将el-table的表格数据下载为.xlsx格式文件

最新推荐文章于 2025-04-28 14:43:07 发布

原创最新推荐文章于 2025-04-28 14:43:07 发布 · 515 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #ecmascript #前端框架

安装依赖

首先，你需要安装 xlsx 和 file-saver 这两个库。

npm install xlsx file-saver --save

有兴趣可以看看两个库的官方说明，直接看下面使用也没问题。

xlsx 官方介绍

The SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets that will work with legacy and modern software alike.
SheetJS社区版提供了经过实战考验的开源解决方案，用于从几乎任何复杂的电子表格中提取有用的数据，并生成可与传统和现代软件一起使用的新电子表格。
SheetJS Pro offers solutions beyond data processing: Edit complex templates with ease; let out your inner Picasso with styling; make custom sheets with images/graphs/PivotTables; evaluate formula expressions and port calculations to web apps; automate common spreadsheet tasks, and much more!
SheetJS Pro提供数据处理以外的解决方案：轻松编辑复杂的模板;用造型释放你内心的毕加索;使用图像/图形/数据透视表制作自定义工作表;评估公式表达式并将计算端口到 Web 应用程序;自动执行常见的电子表格任务，以及更多！

file-saver npm 文档

准备数据

将你要导出的表格数据准备为一个二维数组。比如：

const data = tabelData.map((item: any) => {
    const arr: any[] = [];
    item.forEach((j: any) => {
      arr.push(j);
    });
    return arr;
  });

定义导出方法

你需要创建一个函数，用于处理你上面准备的数据，并且返回一个 xlsx 文件的 blob。

import * as XLSX from 'xlsx';

export const exportExcel = (data: any[]) => {
  // 创建一个空的工作簿
  const workbook = XLSX.utils.book_new();

  // 创建一个工作表
  const worksheet = XLSX.utils.aoa_to_sheet(data);

  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  // 将工作簿转换为二进制数据流
  const excelData = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });

  // 将二进制数据流转换为 Blob 对象
  const blob = new Blob([excelData], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  });

  return blob;
};

下载文件

最后你需要下载文件，可以使用上面安装的 file-save 中提供的 saveAs 函数

import { saveAs } from 'file-saver';

// 处理表格文件
const blob = exportExcel(data);
const fileName = `${item.file.name.split('.')[0]}.xlsx`;
// 下载
saveAs(blob, fileName);

ps：如果在本地使用，正常下载但浏览器会报警告，是因为我们本地使用 http 下载导致了，这个可以不用管，线上是不会出现这个警告的。