最近工作中遇到一个需求,大致需求就是将Excel文件在导入时解析为json格式转换数据结构再传输给后台。这方面的库比较少,比较主流的是js-xlsx,官网地址为sheetjs官网,但是文档都写得不太清楚,坑也比较多,这里我做一个简单的介绍与运用与避坑指南。
先介绍几个基本概念:
workbook 对象,指的是整份 Excel 文档。我们在使用 js-xlsx 读取 Excel 文档之后就会获得 workbook
对象。worksheet 对象,指的是 Excel 文档中的表。我们知道一份 Excel 文档中可以包含很多张表,而每张表对应的就是 worksheet 对象。
废话不多说直接上这里演示下网页中使用
这里演示下在react+antd组合下使用
import { Button, Icon } from 'antd';const XLSX = require('XLSX');//必须使用CommonJs规范引入,如果使用import引入则找不到read 方法 handle_click_send_file = () => { this.file_input.click(); } handle_file_change = () => { this.asyncReaderFile(this.file_input, XLSX).then((res) => { console.log(res); //在回调函数中输出结果 }); }asyncReaderFile = (event, XLSX) => { const files = event.files || []; const file = files[0]; //获取第一个Blob对象 return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsBinaryString(file); //readAsBinaryString(file):将文件读取为二进制字符串 reader.onload = function(e) { const data = e.target.result; //XLSX.read获得 workbook对象,指的是整份Excel文档,并将其解析为二进制字符串 const wb = XLSX.read(data, { type: 'binary', }); //wb.SheetNames[0]是获取第一个表名 //wb.Sheets[表名]获取第一个表的数据 //XLSX.utils.sheet_to_json生成一个对象数组,JSON.stringify解析为json对象 const json = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //这里将解析出的json数据转换下格式 const resData = json.map((obj) => { let words = ''; for (const i in obj) { words += obj[i] + '/'; } return words; }); resolve(resData); }; }); };
这里主要的一个坑就是不能使用inport 引用!因为这个库很早之前就做出来了,用的是CommonJs规范,因此不能用import方式引用;另一个需要注意的点是在浏览器中需要使用read方式解析出workbook对象,在Node环境中则需要使用readFile解析出workbook对象。
还有很多其他用法,具体的详情可以看下文档npm-xlsx