关于react+ant-design+xlsx中关于导入excel表中有空数据,时间格式转换等方式

导入组件

npm install xlsx
yarn add xlsx

主要代码流程

 <Upload {...uploadprops}>
              <Button type="primary">
                데이터 가져오기
              </Button>
          </Upload>
const tansfomer =(arraylist) => {
    let attributeList = arraylist[0];
    let tempdata = [];
    let slicedList = arraylist.slice(1);
    slicedList.map(item => {
      let tempobject = {};
      item.forEach((item, index) => {
        tempobject[attributeList[index]] = item;
      });
      tempdata.push(tempobject);
    });
    return tempdata;
  };
  const formatterTime = (val)=>{
    return val instanceof Date ? moment(val).format("YYYY-MM-DD"):val;
  }
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
  const uploadprops = {
    name: 'file',
    accept:'.xlsx,.xls',
    headers: {
      authorization: 'authorization-text',
    },
    showUploadList: false,
    beforeUpload: (file, fileList) => {
      const rABS = true;
      const f = fileList[0];
      const reader = new FileReader();
      reader.onload = e => {
        let dataResult = e.target.result;
        // if (!rABS) dataResult = new Uint8Array(dataResult);
        const workbook = read(dataResult, {
          type: rABS ? 'binary' : 'array',
          cellDates: true
        });
        const firstWorksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonArr =utils.sheet_to_json(firstWorksheet, { header: 1,rawNumbers:false });

        if (jsonArr.length>0){
          let listData =[]
          jsonArr[0].forEach(item=>{
            let obj= {
              title: item,
              dataIndex: item,
              key: item,
              align: 'center',
              render:formatterTime
            }
            listData.push(obj)
          })
          setDataSource([]);
          setColumns([])
          setColumns(listData);
          let list =[]
          jsonArr.forEach(item=>{
            let newData =[];
            for (let i=0;i<jsonArr[0].length;i++){
              let data = item[i];
              if (data===undefined){
                data=''
              }
              newData.push(data)
            }
            list.push(newData)
          });
          let changList =tansfomer(list);
          setDataSource(changList)
          message.success('가져오기 성공하였습니다!');
        }
      };
      if (rABS) reader.readAsBinaryString(f);
      else reader.readAsArrayBuffer(f);
      return false;
    },
  };
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小仙有礼了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值