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;
      },
原文地址:https://www.cnblogs.com/turbozhang/p/12675874.html