前端 js 基于react ts的excel文件模板下载 文件导入、导出

基于react ts的excel文件模板下载 文件导入、导出

按钮

{pagePermission?.pageActionModels.find(item => item.name === 'OPP_DOWNLOAD_TEMPLATE') &&
          <Button icon={<CopyOutlined />} onClick={(): void => headerHandBtn('down')}>
            {t('OPP_DOWNLOAD_TEMPLATE')}
          </Button>}
        {pagePermission?.pageActionModels.find(item => item.name === 'OPP_DATAIMPORT') &&
          <Upload {...uploadProps2}>
            <Button icon={<PlusOutlined />} loading={uploading} >
              {t('OPP_DATAIMPORT')}
            </Button>
          </Upload>
        }
        {pagePermission?.pageActionModels.find(item => item.name === 'OPP_DATAEXPORT') &&
          <Button icon={<ExportOutlined />} onClick={(): void => headerHandBtn('export')}>
            {t('OPP_DATAEXPORT')}
          </Button>
        }

模板下载

getOppCsv: async (headers:any) => {
    const res = await axios.get(`${URL}/api/Opportunity/ExecleDnowloadTemplet`, headers);
    console.log(res.data, '下载模板的接口返回值')
   // headers接收一个对象
    return res.data
  },
  // 下载模板的接口返回值： Blob {size: 23220, type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}
size: 23220
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
__proto__: Blob

// getCsvFile
 const getCsvFile = async () => {
    const fileName = 'OppTemplate';
    let d = {
      "responseType": "blob"
    }
    let result = await req.getOppCsv(d);
    downLoadCsv(result, fileName)
  }

  // 下载/导出
  const downLoadCsv = (result: any, fileName: any) => {
    let url = window.URL.createObjectURL(new Blob([result]));
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', `${fileName}.xlsx`);
    document.body.appendChild(link);
    link.click();
  }

文件导入

const uploadProps2 = {
    name: 'file',
    accept: '.xlsx',
    onChange(info: UploadChangeParam<UploadFile<any>> ) {},
    beforeUpload: (file: RcFile, fileList: RcFile[]) => {
      setUploading(true);
      req.importOpportunity(file).then(res => {
        console.log(res, '文件导入---');
        if(res.code === 0 && res.msg === 'OK') {
          message.success('success');
        } else {
          message.error('failed');
        }
        setUploading(false);
      });
      return false;
    }
  }

导入接口代码

  // 导入数据
  importOpportunity: async (data: any) => {
    const formData = new FormData();
    formData.append('file', data)
    const res = await axios.post(`${URL}/api/Opportunity/importExecle`, formData, multipartHeader)
    return res.data;
  },

导入接口里用到的参数

const multipartHeader = {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }

文件导出

  // 导出数据
  getExportOpp: async (headers:any) => {
    const res = await axios.get(`${URL}/api/Opportunity/ExportOpp`, headers);
    console.log(res);
    return res;
  },

 // 数据导出
  const getExportOpp = async() => {
    setUploading(true);
    let d = {
      "responseType": "blob"
    }
    let result = await req.getExportOpp(d);
    console.log(result);
    if(result.status === 200) {
      setUploading(false);
      message.success('export success');
    } else {
      message.error('export failed');
    }
    const fileName= 'fileName';
    downLoadCsv(result.data, fileName);
  }

 // 下载/导出
  const downLoadCsv = (result: any, fileName: any) => {
    let url = window.URL.createObjectURL(new Blob([result]));
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    link.setAttribute('download', `${fileName}.xlsx`);
    document.body.appendChild(link);
    link.click();
  }```