vue 使用XLSX 導入表格


1,引入

import XLSX from "xlsx";
2,使用el-upload
            <el-upload
              ref="input"
              action="/"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="importExcel"
              type="file"
            > 

3,導入方法

//導入
      importExcel(file) {
        const types = file.name.split(".")[1];
        const fileType = ["xlsx", "xlc", "xlm", "xls", "xlt"].some(
          item => item === types
        );
        if (!fileType) {
          alert("格式錯誤!請重新選擇");
          return;
        }
        this.file2Xce(file).then(tabJson => {
          if (tabJson && tabJson.length > 0) {
            var data = {};
            var this_ = this;
            let params = Object.assign({}, this_.reviewForm);
            this_.card = JSON.stringify(tabJson[0].sheet);
            data.card = this_.card;
//中英文轉化 let merchantList
= this_.dateTransition(data); for(let i=0;i<merchantList.length;i++){ merchantList[i].childId=params.childId; } console.log(merchantList); data.merchantList =merchantList; delete data.card; this.utils.request.importMerchantInfo(data, this.backUpload); for (var i = 1; i <= 100; i++) { this.value = i; } } }); },
    file2Xce(file) {
        return new Promise(function(resolve, reject) {
          const reader = new FileReader();
          reader.onload = function(e) {
            const data = e.target.result;
            this.wb = XLSX.read(data, {
              type: "binary"
            });
            const result = [];
            this.wb.SheetNames.forEach(sheetName => {
              result.push({
                sheetName: sheetName,
                sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
              });
            });
            resolve(result);
          };
          reader.readAsBinaryString(file.raw);
        });
      },

4 中英文轉換

 // 將對應的中文key轉化為自己想要的英文key
      dateTransition(data){
        let list = [];
        var obj = {};
          var outdata =JSON.parse(data.card);
        for(var i = 0; i <outdata.length; i++) {
          obj = {};
          for(var key in outdata[i]) {
            if(key == '商家編碼') {
              obj['orgNumber'] = outdata[i][key];
            } else if(key == '商家名稱') {
              obj['name'] = outdata[i][key];
            } else if(key == '省份') {
              obj['registeredProvinceId'] = outdata[i][key];
            } else if(key == '市區') {
              obj['registeredCityId'] = outdata[i][key];
            } else if(key == '城鎮/縣') {
              obj['registeredRegionId'] = outdata[i][key];
            } else if(key == '具體地址') {
              obj['registeredDetailAddress'] = outdata[i][key];
            } else if(key == '組織級別') {
              obj['level'] = outdata[i][key];
            } else if(key == '商家類型') {
                     if(outdata[i][key] == '入駐商家'){
                       obj['merchantType'] = 2;
                     }else if(outdata[i][key] == '自營商家'){
                       obj['merchantType'] = 1;
                     }
            } else if(key == '聯系人') {
              obj['contactName'] = outdata[i][key];
            } else if(key == '聯系人手機') {
              obj['contactMobile'] = outdata[i][key];
            }
          }
          list.push(obj);
        }
        return list;
      },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM