vue 前端導入execl數據

直接上我從別人那裏複製的代碼
html

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

在當前頁面引入

import XLSX from "xlsx"   // 沒有就下載   npm install xlsx

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;
        };
        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'
              });
            }
          } catch (e) {
            console.log('文件類型不正確');
            return;
          }
          var fromTo = '';
          for (var sheet in workbook.Sheets) {
            fromTo = workbook.Sheets[sheet]['!ref'];
            workbook.Sheets[sheet] = XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
            _this.excelData = workbook.Sheets
          }
          console.log(_this.excelData); // 輸出爲對象格式,也可輸出位數組格式,我這樣是爲了配合後端
        };
        reader.readAsArrayBuffer(f);
      }
      var reader = new FileReader();
      if (rABS) {
        reader.readAsArrayBuffer(file);
      } else {
        reader.readAsBinaryString(file);
      }
    },

一次不錯的抄襲,接下來該研究文件大小,判斷過大時如何多次請求,有人會嗎?

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章