前言：

用到的庫參考連結：

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的資料是所有的資料