注意:Excel的导入、导出功能一般情况下都是服务端完成,这里只是记录一下前端实现方法,供小众场景使用。
这里的实现要依赖第三方库:xlsx。
兼容性:IE9+
npm i -S https://cdn.sheetjs.com/xlsx-0.18.12/xlsx-0.18.12.tgz
Excel 数据格式有两种,一种是 有表头说明 的,另一种是 无表头说明 的,具体内容如下:
这里需要考虑 有表头说明 和 无表头说明 的情况,为了方便统一处理,作如下规定:
{ key: value }
,这里需要建立一个 name -> key
的映射关系:const excelNameToKey = {
'姓名': "name",
'年龄': "age",
'特长': "skill",
'电话': "telephone",
'地址': "address",
};
功能实现完整代码:
解析数据:
{{ excelData }}
// src/utils/json2Excel.ts
import * as XLSX from "xlsx";
export default (
data: any[],
sheetName: string = "sheet1",
fileName: string = "json2Excel.xlsx"
) => {
const jsonWorkSheet = XLSX.utils.json_to_sheet(data);
const workBook = {
SheetNames: [sheetName], // 指定有序 sheet 的 name
Sheets: {
[sheetName]: jsonWorkSheet, // 表格数据内容
},
};
return XLSX.writeFile(workBook, fileName); // 向文件系统写出文件
};
以上只是实现了简单的单个导入、导出功能,可以将其完善为 批量操作,但是要注意批量操作带来的耗时性,将对应的耗时部分通过 webworker
等方式处理,这样页面就不需要一直等待当前的操作完成。
另外,如果有要求在导出 Excel
时有表格样式(如:行列宽高设置等)可以通过 xlsx-populate 来实现。
转载:给我实现一个前端的 Excel 导入和导出功能 - 掘金