纯前端解析 excel

[FanFanJUN]

复用组件

<BatchImportForNew
                    columns={mapKeyValueCol(
                      keyMapForWin(defaultValue.pricingMannerCode)
                    ).map((item) => ({ ...item, align: "center" }))}
                    keyMap={keyMapForWin(defaultValue.pricingMannerCode)}
                    tableKey=""
                    beforeimport={this.beforeimport}
                    downParams={{
                      
                    }}
                    fileName={imfileName}
                    downLoadUrl={
                     
                    }
                    downMethod="post"
                    callback={this.importCallBackForNew}
                    defaultValue={defaultValue}
                  />

上传组件

<Upload
                showUploadList={false}
                style={{ width: "100%" }}
                fileList={this.state.fileList}
                beforeUpload={this.beforeUpload}
                onChange={this.getUploadFile}
              >
                <Button
                  style={{ marginLeft: 5 }}
                  key="chooseFile"
                  loading={loading}
                  type="primary"
                >
                  <Icon type="upload" />选择文件
                </Button>
              </Upload>

前端解析

// 前端解析
    getUploadFile = (e) => {
        const { keyMap, tableKey } = this.props;
        const fileName = e.file.name;
        // 导入文件类型
        if(!fileName.includes('xls')) {
            return;
        }
        //拿到所导入文件的名字
        let fileList = [...e.fileList];
        fileList = fileList.slice(-1);
        this.setState({ fileList, loading: true });
        //定义reader，存放文件读取方法
        const reader = new FileReader()
        const _that = this;
        if (e.file.status !== 'uploading') {
            reader.onload = (function (theFile) {
                return function (e) {
                    let binary = '';
                    var wb;
                    var outData;
                    const bytes = new Uint8Array(e.target.result);
                    const length = bytes.byteLength;
                    for (let i = 0; i < length; i++) {
                        binary += String.fromCharCode(bytes[i]);
                    }
                    wb = XLSX.read(binary, {
                        type: 'binary'
                    });
                    outData = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                    // 处理outData
                    if (!isEmptyArray(outData)) {
                        const newImportList = outData.map((item) => {
                            return dealimportObj(item, keyMap);
                        });
                        newImportList.forEach((item, index) => {
                            // 前端自定义行号
                            item[tableKey] = (Array(4).join(0) + (index+1)).slice(-4) + '0';
                            item.whetherNew = true;
                        })
                        _that.setState({ data: newImportList, loading: false });
                    }
                };
            })(fileList[0].originFileObj);
        }
        //启动函数
        reader.readAsArrayBuffer(fileList[0].originFileObj);
        //onload在文件被读取时自动触发
    }

处理解析数据函数

export const dealimportObj =(obj, keyMap)=>{
    if(!obj) return;
    const a =  Object.keys(obj).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = obj[key]
        return newData
        }, {});
    return a;
}