前端实现 Excel 导入和导出功能

注意：Excel的导入、导出功能一般情况下都是服务端完成，这里只是记录一下前端实现方法，供小众场景使用。

这里的实现要依赖第三方库：xlsx。

兼容性：IE9+

安装 xlsx

npm i -S https://cdn.sheetjs.com/xlsx-0.18.12/xlsx-0.18.12.tgz

基本内容

组件效果和结构

Excel 数据格式

Excel 数据格式有两种，一种是 有表头说明 的，另一种是 无表头说明 的，具体内容如下：

• 有表头说明

• 无表头说明 

 

实现 Excel 转 JSON 功能

这里需要考虑 有表头说明 和 无表头说明 的情况，为了方便统一处理，作如下规定：

• 通过将 有表头说明 的数据格式统一转化为 无表头说明 的数据格式
• 统一将 无表头说明 的数据格式转化为标准的接口入参，即 { key: value }，这里需要建立一个 name -> key 的映射关系：

const excelNameToKey = {
  '姓名': "name",
  '年龄': "age",
  '特长': "skill",
  '电话': "telephone",
  '地址': "address",
};

功能实现完整代码：

JSON 导出为 Excel

基本结构

 

// 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 导入和导出功能 - 掘金