安装依赖
首先,你需要安装 xlsx 和 file-saver 这两个库。
npm install xlsx file-saver --save
有兴趣可以看看两个库的官方说明,直接看下面使用也没问题。
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 应用程序;自动执行常见的电子表格任务,以及更多!
准备数据
将你要导出的表格数据准备为一个二维数组。比如:
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 下载导致了,这个可以不用管,线上是不会出现这个警告的。
参考资料
xlsx npm 文档
file-saver npm 文档
vue3导入elcel表格并展示(使用xlsx插件+vite+element-plus)/js上传表格(js+xlsx)