Vue 導入excel功能

html：

<input type="file" @change="importf(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>

 

js代碼:

    importf(obj) {
      let _this = this;  
      this.file = event.currentTarget.files[0];  
      var rABS = false; //是否將文件讀取為二進制字符串  
      var file = this.file; 

      FileReader.prototype.readAsBinaryString = function(f) {  
        var binary = "";  
        var rABS = false; //是否將文件讀取為二進制字符串  
        var pt = this;  
        var workbook; //讀取完成的數據  
        // var excelData;  
        var reader = new FileReader(); 
        reader.onprogress = function(e) { 
          let total = file.size;
          _this.progress = (e.loaded/total)*100;
          console.log( _this.progress);
        };   
        reader.onload = function(e) {
          try {
            var bytes = new Uint8Array(reader.result);  
            var length = bytes.byteLength;  
            for(var i = 0; i < length; i++) {  
              binary += String.fromCharCode(bytes[i]);  
            }  
            if(rABS) {  
              workbook = XLSX.read(btoa(fixdata(binary)), { //手動轉化  
                type: 'base64'  
              });  
            }else {  
              workbook = XLSX.read(binary, {  
                type: 'binary'  
              });  
            } 
            // excelData = []; 
          } catch(e) {
            console.log('文件類型不正確');
            return;
          }
          var fromTo = '';
          for (var sheet in workbook.Sheets) {
            if (workbook.Sheets.hasOwnProperty(sheet)) {
              fromTo = workbook.Sheets[sheet]['!ref'];
              _this.excelData = _this.excelData.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
            }
          }
          console.log(_this.excelData);
        };

        reader.readAsArrayBuffer(f);  

      } 
 
      var reader = new FileReader();
      if(rABS) {  
        reader.readAsArrayBuffer(file);  
      }else {  
        reader.readAsBinaryString(file);  
      } 

      
    },

注意一下：

需要在data那里定義下excelData變量

data:{
return {
excelData:[],
}
}
這樣this.excelData的concat函數才可以使用

參考網址：

https://www.jianshu.com/p/74d405940305