• 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;
          },
  • 相关阅读:
    jwplayer
    jwPlayer为js预留的回调方法
    Java的内存--内存溢出vs内存泄露(2)
    java:LeakFilling(Hibernate)
    java:Hibernate框架1(环境搭建,Hibernate.cfg.xml中属性含义,Hibernate常用API对象,HibernteUitl,对象生命周期图,数据对象的三种状态,增删查改)
    java:struts框架(网路静态U盘项目)
    java:struts框架5(Converter,Validation,Tags(Object-Graph Navigation Language))
    java:struts框架4(Ajax)
    java:struts框架3(自定义拦截器,token令牌,文件上传和下载(单/多))
    java:struts框架2(方法的动态和静态调用,获取Servlet API三种方式(推荐IOC(控制反转)),拦截器,静态代理和动态代理(Spring AOP))
  • 原文地址:https://www.cnblogs.com/turbozhang/p/12675874.html
Copyright © 2020-2023  润新知