v u e + ts excel表的导入解析转换 加下载excel表格式（个人笔记）

html部分 

我这里是用element，组件Dropdown 下拉菜单，做批量导入和下载excel模板的选项。上传是用的组件 Upload 上传。

            <el-dropdown trigger="click">
              <el-button type="primary">批量导入<i class="el-icon-arrow-down"></i></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-button type="text">
                      <a style="color: #59a3ff" href="./接单目标模板.xlsx" target="_blank"> 下载模板 </a>
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-upload :show-file-list="false" class="upload-demo" action="" :auto-upload="false" :on-change="uploadChange">
                      <el-button type="text">导入文件 </el-button>
                    </el-upload>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

 效果图

 

导入事件部分

// 导入事件
const uploadChange = async (e: any) => {
      console.log(e);
      const files = e.raw;
      if (files.length <= 0) {
        return false;
      } else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        console.log("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      // 读取表格
      const fileReader = new FileReader();
      fileReader.onload = (ev: any) => {
        const workbook = XLSX.read(ev.target.result, {
          type: "binary",
        });
        const wsname = workbook.SheetNames[0];
        const ws: any = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
        console.log(ws); // 转换成json的数据
        const m: any = dealExcel(ws); // ...对数据进行自己需要的操作
        console.log(m);
      };
      fileReader.readAsBinaryString(files);
      state.UPdialogTableVisible = true;
    };


 // 定义数据
    const dealExcel = (ws: any) => {
      let keymap: any = {
        // 我们要转换的开头
        empName: "负责人",
        period: "年月",
        custName: "客户",
        partType: "产品类别",
        itemNo: "产品",
        areaName: "区域",
        brandName: "品牌",
        channelType: "渠道",
        objectiveAmt: "接单目标金额",
      };
//targetTypeData.value值是我项目需要用到的匹配字段 这个因为我的项目需要根据这里有的数据从而保留的字段 没有的要去除。 如果项目没有要求字段变化的话 这段匹配逻辑可以去掉不用
// 我项目里匹配值是 ['负责人','年月',"客户"] 返回的是这样的 所以要进行匹配一下
      const jsonArr: any = [];
      for (const key in keymap) {
        if (targetTypeData.value.indexOf(keymap[key]) < 0) { 
          if (key != "objectiveAmt") delete keymap[key];
        }
      }
      let keyJson = { ...keymap }; //用于初始化
      ws.forEach((item: any) => {
        for (const k in keymap) {
          keymap[k] = item[keymap[k]];
             console.log(keymap[k], item[keymap[k]]);
        }
         console.log(keymap);
       jsonArr.push(keymap);
        keymap = { ...keyJson };
      });
      console.log(jsonArr);
      wxExcelData.value = jsonArr;
     console.log(wxExcelData.value);
// 不需要匹配的话只用这个就可以
// ws.forEach((sourceObj: any) => {
//        let arr = new Array()
//        Object.keys(sourceObj).map((keys) => {
//          if (keys.includes('步骤')) {
//            arr.push(sourceObj[keys])
//            delete sourceObj[keys]
 //         } else if (keymap[keys]) {
//            sourceObj[keymap[keys]] = sourceObj[keys]
//            delete sourceObj[keys]
//          }
//        })
//      })
      return ws
    };

选择导入的excel

 

导入展示效果， 就可以根据我自己的项目需求而选择性的保留需要新增的数据再提交给后端接口了

 我这里还做了一个弹窗tabel表格展示刚刚导入的表格数据 信息有误的话可以直接修改 和一些提示 这个可以自由发挥，我就不过多解析了

 

 

至于下载导入模板excel 我用的是一种很简单的方法，我是直接把模板放到了pubic

 然后再html部分添加a标签

 <a style="color: #59a3ff" href="./接单目标模板.xlsx" target="_blank"> 下载模板 </a>