前端表格利器-sheet.js

如何在vue-cli 2.x中操作excel文件？？

我司PM最近派了一个需求，在我们的系统中实现批量导入数据。直白点就是，用户选择本地的excel文件上传，自动导入数据到我们的系统中。按说这种功能应该交给服务端来实现，但是为了体现Js的博大精深，我（一个小小的前端同学）就接下来了，但是最终还是完美的把功能实现了，简直太优秀。下面进入正题~

思路

我们在浏览器环境中，将选择的xlsx文件xls文件转化成我们熟悉的JSON格式，然后不就可以为所欲为了~

所以必须说下我们这个🐂🍺的JS库！！！

sheet.js可以用来解析符合格式的数据 && 导出符合格式的数据 && 利用中间层操作数据。

同时可以运行在浏览器端和node端。各种简单好用的API，功能非常强大。

具体操作

1. 在项目中安装XLSX库

   npm install xlsx --save
   

   或者CDN (依赖JQ)

   <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
   <script src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
   

2. 引入xlsx库

   import XLSX from "xlsx"
   

3. 与UI结合(用element UI举例)

   <el-upload action="" :before-upload="beforeUpload" :multiple="false" accept=".xls,.xlsx">
   	<el-button type="primary" icon="el-icon-plus">Add a waterfall list</el-button>
   </el-upload>
   

   /**
    * beforeUpload上传文件之前的钩子，参数为上传的文件。
    * 若返回 false 或者返回 Promise 且被 reject，则停止上传。
    */
   beforeUpload(file) {
   	let reader = new FileReader();
   	reader.onload = function(e) {
   		let data = new Uint8Array(e.target.result);
   		let workbook = XLSX.read(data, {type: 'array'});
   		let first_sheet_name = workbook.SheetNames[0];
   		let worksheet = workbook.Sheets[first_sheet_name];
   		let content = XLSX.utils.sheet_to_json(worksheet);
           console.log(content);
       	 // todo something
         };
         reader.readAsArrayBuffer(file);
         return false;
   }
   

4. 看效果

   

总结

1. 搞清楚工作簿、工作表、Excel引用样式(单元格地址)、单元格概念。

   Excel名词	js-xlsx中的抽象类型
   工作簿	workBook
   工作表	Sheets
   Excel引用样式(单元格地址)	cellAddress
   单元格	cell

2. 解析workbook, 即一个工作簿，一个excel文件，常用的方式有，详情参考Parsing Workbooks

3. 一个工作簿格式:

   

4. XLSX.Util对象有很多使用方法来处理Sheet，常见的方法如下，详情参考parsing-and-writing-examples

   感谢js-xlsx模块学习指南这篇文章给予的参考！