![148a37880fcded3632357cdbc293272d.png](https://i-blog.csdnimg.cn/blog_migrate/04b0113ee2f4ac3bfdb520f0d5f4f8d8.jpeg)
在日常前端开发中,遇到批量导入的情况,通常是将文件上传至后端来解析excel文件流。这种做法会占用一定的带宽和后端性能,SheetJS是用于多种电子表格格式的解析器和编写器。通过使用SheetJS,前端可以直接实现.xlsx, .xlsm, .txt, .csv, .html等文件的导出和导入,比如,将execl文件转化为json,或者将json导出为execl。当然这一定程度上也会消耗前端的性能,但这对于数据安全更有保障,而且也有利于前后端交互的统一性。本文将介绍如何使用sheetJS,实现纯前端的execl数据导出和导入,并简单介绍sheetJS相关概念:
sheetJS社区版js-xlsx地址为:https://github.com/SheetJS/sheetjs
相关概念
execl与js-xlsx之间的关系,这两者有着极强的对应关系,如下:
![f5e2a42c44acee71cae89ff6144a5632.png](https://i-blog.csdnimg.cn/blog_migrate/09546e3946f139c96d1124ed65bcfb2f.jpeg)
就像我们熟悉的execl文件一样,工作簿里有可能存在多个工作表,每个工作表里也很多单元格,js-xlsx有workBook对象,里面可以存在和创建Sheets,在Sheets对象里还存在很多的cell元素。
js-xlsx的安装
参考官方文档:
script引入:
CDN引入:
//npm方式$ npm install xlsx//bower方式$ bower install js-xlsx
Json数据导出为execl文件
为了把json数据导出为execl文件,我们需要执行三个步骤:
- 创建工作簿,就是创建一个workBook对象;
- 在工作簿里新建工作表,就是新建Sheets对象;
- 把数据写入表格的单元格里,就是把Json数据写入cell中;
代码示例如下:
//data为json数据,Export(){ let wb = XLSX.utils.book_new(),//新建工作簿 sheet = {}, sheet = XLSX.utils.json_to_sheet(data, {skipHeader:true});//新建工作表 XLSX.utils.book_append_sheet(wb, sheet, 'name');//工作表添加到工作簿中 XLSX.writeFile(wb, 'name.xlsx');}
XLSX.utils.json_to_sheet获取对象数组并且返回一张基于对象自动生成"headers"的工作表。默认的列顺序由第一次出现的字段决定,这些字段通过使用Object.keys得到,不过可以使用选项参数覆盖。
![b70486594fd30c0a0a0420d302ceb2c3.png](https://i-blog.csdnimg.cn/blog_migrate/ac7a901d1e5489f5f2f26a1f935bbe60.jpeg)
原始的表单不能以明显的方法复制,因为JS对象的keys必须是独一无二的。之后用e_1 和 S_1替换第二个e 和 S。
var ws = XLSX.utils.json_to_sheet([{ S:1, h:2, e:3, e_1:4, t:5, J:6, S_1:7 },{ S:2, h:3, e:4, e_1:5, t:6, J:7, S_1:8 }], {header:["S","h","e","e_1","t","J","S_1"]});
或者可以跳过header行:
var ws = XLSX.utils.json_to_sheet([{ A:"S", B:"h", C:"e", D:"e", E:"t", F:"J", G:"S" },{ A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7 },{ A: 2, B: 3, C: 4, D: 5, E: 6, F: 7, G: 8 }], {header:["A","B","C","D","E","F","G"], skipHeader:true});
skipHeader:true导出会跳过表头字段。
除了json_to_sheet,还有其他的数据导入Sheets对象的方法:
- aoa_to_sheet 把转换JS数据数组的数组为工作表。
- table_to_sheet 把DOM TABLE元素转换为工作表。
- sheet_add_aoa 把JS数据数组的数组添加到已存在的工作表中。
- sheet_add_json 把JS对象数组添加到已存在的工作表中。
详情查看文档:https://github.com/SheetJS/sheetjs
XLSX.utils.book_append_sheet用来把工作表添加到工作簿中,XLSX.utils.book_append_sheet(wb, sheet,name)方法有三个参数:
- wb: 要写入的工作簿
- sheet:工作表
- name:工作表的名称
XLSX.write(wb, write_opts) 用来写入工作簿 wb。XLSX.writeFile(wb, filename, write_opts) 把 wb 写入到特定的文件 filename 中。如果是基于浏览器的环境,此函数会强制浏览器端下载。XLSX.writeFileAsync(filename, wb, o, cb) 把 wb 写入到特定的文件 filename 中。如果 o 被省略,写入函数会使用第三个参数作为回调函数。其中write_opts是写入配置,可以配置包括输出数据编码、把字节存储为类型d等等属性。filename就是文件名了。
excel文件读取为Json数据
首先,用到iview-UI的Upload组件,然后在组件的before-upload钩子(上传前)中执行数据解析。
//.html导入修改
//.jsbeforeUpload(file, fileList){ const f = file; let reader = new FileReader();//创建FileReader对象 reader.readAsArrayBuffer(f);//读取指定的Blob中的内容 reader.onload = function (e) {//读取file完成后 let data = e.target.result; let workbook = XLSX.read(data, { type: 'array' }); let first_worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一张数据表 var jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header:1});//把工作表转化为Json console.log('jsonArr:',jsonArr)};}
FileReader 是一个常用的web API,FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File和Blob对象指定要读取的文件或数据。FileReader.onload处理load事件,该事件在读取操作完成时触发。reader.readAsArrayBuffer开始读取指定的Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer数据对象。
XLSX.read(data, read_opts) 用来解析数据 data。XLSX.readFile(filename, read_opts) 用来读取文件名 filename 并且解析。read_opts为读取配置,可以用来配置输入数据编码等。XLSX.utils.sheet_to_json把工作表转化为Json。
其实SheetJS除了简单的导入和导出excel文件之外,还支持其他的文件类型,而且还能设置文件样式等,功能强大,慢慢挖掘!