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

npm install file-saver xlsx

2.main.js中引入依賴

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

3.用到elementUI的upload上傳控件，設置action, http-request等標簽屬性，由於不需要直接發請求上傳到服務器，暫不這是action屬性，不需要考慮跨域問題

“httpRequest”是自定義上傳方法，用來處理文件中的數據，上傳過程會觸發改方法

<el-upload
    class="upload-excel"
    action=""
        drag
    :http-request="httpRequest"
    accept="csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
    <i class="el-icon-upload"></i>
      <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
</el-upload>

4.上傳方法

httpRequest(e) {
    var _this = this;
    var rABS = false; //是否將文件讀取為二進制字符串
    let f = e.file // 文件信息
    if(!f) return false;
    else if(!/\.(xls|xlsx)$/.test(f.name.toLowerCase())) {
        this.$message.error('上傳格式不正確，請上傳xls或者xlsx格式')
        return false
    }

    var reader = new FileReader();
    FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否將文件讀取為二進制字符串
        var wb; //讀取完成的數據
        var outdata;
        var reader = new FileReader();
        reader.onload = function(e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for(var i = 0; i < length; i++) binary += String.fromCharCode(bytes[i]);
            var XLSX = require('xlsx');
            if(rABS) wb = XLSX.read(btoa(fixdata(binary)), {type: 'base64'}); //手動轉化
            else wb = XLSX.read(binary, { type: 'binary' });                              // 這里能獲取到所有的數據 25             outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {defval: ''}); //outdata的格式可打印了自行查看，注意這里只取到了第一個sheet的數據
            // 以下是對outdata的格式化，可按個人需要自行轉換
            outdata.map((p, idx)=> {
                // ...
            })
        }
        reader.readAsArrayBuffer(f);
    }
    if(rABS) reader.readAsArrayBuffer(f);
    else reader.readAsBinaryString(f);
},

代碼第24行中，變量wb的數據是所有的數據