2022-06-27 发表 Tech / FrontEnd 4 分钟读完 (大约596个字) 次访问 纯前端实现 Excel 表格的读取与生成(json 转 xlsx,xlsx 转 json) 需求 利用现有的查询和新增接口,如何在不改后端的情况下给页面增加导入和导出功能? 前端查询到数据,可以生成 xlsx 文件吗? 前端可以读取用户选择的 xlsx 文件,然后调用新增接口向后端写入数据吗? 可以! 安装 xlsx 库 通过 npm 安装 1 npm install xlsx 或者通过 CDN 引入(不推荐) 1 <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script> 我安装的是 0.18.5 版本 编写导入功能 12345678910111213141516171819202122232425262728 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 李四 会被转换为—— 12345678910 [ { 工号: '1000', 姓名: '张三', }, { 工号: '1001', 姓名: '李四', }] 编写导出功能 123456789101112 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')} 与前面的导入功能正好相反,导出时对象键会自动转化为表头,对象值会自动转化为表内容—— 12345678910 [ { id: '1000', name: '张三', }, { id: '1001', name: '李四', }] 会被转换为—— id name 1000 张三 1001 李四 为了规范导出的表头,建议先通过 map 方法生成好导出对象结构,再调用导出方法—— 1234567891011 /** * 生成导出对象结构 */function parseData(data) { return data.map((r) => { return { 工号: r.id, 姓名: r.name } })} 有意思的是, xlsx.writeFile 方法同时支持 node.js 和浏览器环境,在 node.js 环境运行会将文件写入当前路径,在浏览器环境运行会触发文件下载。 纯前端实现 Excel 表格的读取与生成(json 转 xlsx,xlsx 转 json) https://www.imaegoo.com/2022/xlsx-js/ 作者 iMaeGoo 发布于 2022-06-27 更新于 2022-06-27 许可协议 CC BY 4.0 # js xlsx