纯前端实现 Excel 表格的读取与生成（json 转 xlsx，xlsx 转 json）

需求

利用现有的查询和新增接口，如何在不改后端的情况下给页面增加导入和导出功能？

前端查询到数据，可以生成 xlsx 文件吗？

前端可以读取用户选择的 xlsx 文件，然后调用新增接口向后端写入数据吗？

可以！

安装 xlsx 库

通过 npm 安装

npm install xlsx

或者通过 CDN 引入（不推荐）

<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>

我安装的是 0.18.5 版本

编写导入功能

import { utils, read } from 'xlsx'

/**
 * xlsx 转 js 对象
 * @param {File} file 可以从 <input type="file"> 的 change 事件中获取到，可以参考项目使用的 UI 库的文档，这里省略具体步骤
 * @returns {Promise<Array<Object>>}
 */
function importXlsx(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = (event) => {
      try {
        const data = event.target.result
        // 读取工作簿
        const workbook = read(data, { type: 'binary' })
        // 读取第一个工作表，如需读取指定工作表，请改为 workbook.Sheets['工作表名称']
        const sheet = workbook.Sheets[workbook.SheetNames[0]]
        // 将工作表转为 js 对象
        const json = utils.sheet_to_json(sheet)
        resolve(json)
      } catch (e) {
        reject(e)
      }
    }
    reader.onerror = reject
    reader.readAsBinaryString(file)
  })
}

通过以上方法得到的是一个 js Array 对象，表头会自动转化为对象键，表内容会自动转化为对象值，例如——

工号	姓名
1000	张三
1001	李四

会被转换为——

[
  {
    工号: '1000',
    姓名: '张三',
  },
  {
    工号: '1001',
    姓名: '李四',
  }
]

编写导出功能

import { utils, writeFile } from 'xlsx'

/**
 * js 对象转 xlsx，如果在浏览器中运行会触发文件下载
 * @param {Array<Object>} data
 */
function exportXlsx(data) {
  const book = utils.book_new()
  const sheet = utils.json_to_sheet(data)
  utils.book_append_sheet(book, sheet)
  writeFile(book, 'imaegoo.xlsx')
}

与前面的导入功能正好相反，导出时对象键会自动转化为表头，对象值会自动转化为表内容——

[
  {
    id: '1000',
    name: '张三',
  },
  {
    id: '1001',
    name: '李四',
  }
]

会被转换为——

id	name
1000	张三
1001	李四

为了规范导出的表头，建议先通过 map 方法生成好导出对象结构，再调用导出方法——

/**
 * 生成导出对象结构
 */
function parseData(data) {
  return data.map((r) => {
    return {
      工号: r.id,
      姓名: r.name
    }
  })
}

有意思的是，xlsx.writeFile 方法同时支持 node.js 和浏览器环境，在 node.js 环境运行会将文件写入当前路径，在浏览器环境运行会触发文件下载。