js-xlsx前端读excel数据匹配

1,719 阅读1分钟

效果图如下

注意读取选项参数及格式化选项参数

workbook = XLSX.read(result, { type: "array",cellDates:true, cellNF: false, cellText:false});
XLSX.utils.sheet_to_json(workbook.Sheets[sheet],{raw:false, dateNF:"yyyy-mm-DD"})

#文件上传

uploadChange = async info => {

console.log(info);
fileList= info.fileList
file=info.file

this.readExcel(file)

}

#读取ExcelData;

readExcel = file => {
    console.log('readExcel')
    const fileReader = new FileReader();
    fileReader.onload = event => {
        try {
            const { result } = event.target;
            // 以二进制流方式读取得到整份excel表格对象
            //const workbook = XLSX.read(result, { type: "binary" });
            const workbook = XLSX.read(result, { type: "array",cellDates:true, cellNF: false, cellText:false});
            let data = []; // 存储获取到的数据
            let sheetHeader = [];
            // 遍历每张工作表进行读取(这里默认只读取第一张表)
            for (const sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    // 利用 sheet_to_json 方法将 excel 转成 json 数据
                    data = data.concat(
                        XLSX.utils.sheet_to_json(workbook.Sheets[sheet],{raw:false, dateNF:"yyyy-mm-DD"})
                    );
                    //获取表第一行数据返回数组;
                    sheetHeader = this.getExcelTitleRow(workbook.Sheets[sheet]);
                    break; // 如果只取第一张表,就取消注释这行
                }
            }

            this.metaAction.sfs({
                "data.excelData": fromJS(data),
                "data.sheetHeader": fromJS(sheetHeader)
            });
            console.log("dd",data, sheetHeader);
        } catch (e) {
        console.log("Excel解析失败");
        return;
    }
    fileReader.readAsArrayBuffer(file);//兼容ie11
    /* if(fileReader.readAsBinaryString){
    // 以二进制方式打开文件
        fileReader.readAsBinaryString(file);//ie11不支持
    }else{
        fileReader.readAsArrayBuffer(file);
    } */
};

获取excel表头

getExcelTitleRow = sheet => {
    if(sheet == null || sheet["!ref"] == null) return [];
    let val, hdr = [] ,v=0, vv="",cols=[];
    let range=XLSX.utils.decode_range(sheet["!ref"])
    let c = range.e.c;
    let CC = 0;
    let rr = XLSX.utils.encode_row(range.s.r)
    for (let i = 0; i <= c; i++) {
        cols[i] = XLSX.utils.encode_col(i);
        let val =sheet[cols[i] + rr];
        vv = v = XLSX.utils.format_cell(val, null);
        if(v == null||v =='') continue;
        let counter=0
        for(CC = 0; CC < hdr.length; ++CC){
            if(hdr[CC] == vv) vv = v + "_" + (++counter);
        }
        hdr.push(vv);
    }
    return hdr;
}

判断是否符合基本模板

 sheetDataAutoMatch = (baseTemplate, sheetHeader) => {
    let isBaseTemplate = true; //是否完全匹配基本模板
    let relationShip = []; //模板匹配关系
    baseTemplate.forEach(item => {
      if (sheetHeader.includes(item.baseTitle)) {
        relationShip.push({ ...item, excelTitle: item.baseTitle });
      }else if(sheetHeader.includes("*"+item.baseTitle)){
        relationShip.push({ ...item, excelTitle: "*"+item.baseTitle });
      } else {
        isBaseTemplate = false;
        let synonym = item.synonym ? [...item.synonym] : [];
        let isMatchsynonym = false;
        synonym.forEach(synonymItem => {
          if (sheetHeader.includes(synonymItem)) {
            relationShip.push({
              ...item,
              excelTitle: synonymItem
            });
            isMatchsynonym = true;
          }else if(sheetHeader.includes("*"+synonymItem)){
            relationShip.push({
              ...item,
              excelTitle: "*"+synonymItem
            });
            isMatchsynonym = true;
          }
        });

        isMatchsynonym
          ? ""
          : relationShip.push({
              ...item,
              excelTitle: ""
            });
      }
    });
    return { isBaseTemplate, relationShip };
  };

自调整匹配头

 let baseTemplate = []; //基本模板
  let excelData = []; //EXCEL数据
  let relationShip = []; //EXCEL匹配关系
  let sheetHeader = []; //EXCEL数据中表头提取
  let dropDownSheetHeader = []; //可调整EXCEL数据表头
//Excel表头匹配修改
sheetHeaderChange = (e, fieldName) => {
  let relationShip = this.metaAction.gf("data.relationShip").toJS();
  let sheetHeader = this.metaAction.gf("data.sheetHeader").toJS();
  relationShip = relationShip.map(item => {
    if (item.fieldName == fieldName) {
      item.excelTitle = e.key == "0" ? "" : e.key;
    }
    return item;
  });
  let dropDownSheetHeader = this.getDropDownSheetHeader(
    relationShip,
    sheetHeader
  );
  this.metaAction.sfs({
    "data.relationShip": fromJS(relationShip),
    "data.dropDownSheetHeader": fromJS(dropDownSheetHeader)
  });
};