vue导入Excel数据并展示成表格

前言：

用到的库参考链接：

FileReader：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader    这个在之前的下载excel的随笔中有用到

xlsx: https://www.npmjs.com/package/xlsx 本次用到读取excel数据插件，功能很强大，文档太大了，需要多琢磨

前端上传excel文件，读取Excel数据并展示成表格

通常情况下上传文件调用后台接口，接口返回改文件的数据，前端处理展示成表格，有些需求，例如，后台只需要表格需要的数据，上传过程后台不落库，并不提供接口，这是就需要我们自己上传文件读取到改文件的数据展示，并提交给后台

1.安装 file-saver 和 xlsx

1 npm install file-saver xlsx

2.main.js中引入依赖

1 import XLSX from 'xlsx'
2 Vue.use(XLSX)

3.用到elementUI的upload上传控件，设置action, http-request等标签属性，由于不需要直接发请求上传到服务器，暂不这是action属性，不需要考虑跨域问题

“httpRequest”是自定义上传方法，用来处理文件中的数据，上传过程会触发改方法

1 <el-upload
2     class="upload-excel"
3     action=""
4         drag
5     :http-request="httpRequest"
6     accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
7     <i class="el-icon-upload"></i>
8       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
9 </el-upload>

4.上传方法

 1 httpRequest(e) {
 2     var _this = this;
 3     var rABS = false; //是否将文件读取为二进制字符串
 4     let f = e.file // 文件信息
 5     if(!f) return false;
 6     else if(!/\.(xls|xlsx)$/.test(f.name.toLowerCase())) {
 7         this.$message.error('上传格式不正确，请上传xls或者xlsx格式')
 8         return false
 9     }
10
11     var reader = new FileReader();
12     FileReader.prototype.readAsBinaryString = function(f) {
13         var binary = "";
14         var rABS = false; //是否将文件读取为二进制字符串
15         var wb; //读取完成的数据
16         var outdata;
17         var reader = new FileReader();
18         reader.onload = function(e) {
19             var bytes = new Uint8Array(reader.result);
20             var length = bytes.byteLength;
21             for(var i = 0; i < length; i++) binary += String.fromCharCode(bytes[i]);
22             var XLSX = require('xlsx');
23             if(rABS) wb = XLSX.read(btoa(fixdata(binary)), {type: 'base64'}); //手动转化
24             else wb = XLSX.read(binary, { type: 'binary' });                              // 这里能获取到所有的数据
25             outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {defval: ''}); //outdata的格式可打印了自行查看，注意这里只取到了第一个sheet的数据
26             // 以下是对outdata的格式化，可按个人需要自行转换
27             outdata.map((p, idx)=> {
28                 // ...
29             })
30         }
31         reader.readAsArrayBuffer(f);
32     }
33     if(rABS) reader.readAsArrayBuffer(f);
34     else reader.readAsBinaryString(f);
35 },

代码第24行中，变量wb的数据是所有的数据