react+antd的导入导出

 //数据导出 生成excel链接
const handleExport = async () => {
    // getTankExportApi().then((res: any) => {
    //   const blob = new Blob([res.data], {
    //     type: "application/vnd.ms-excel;charset=utf-8",
    //   });
    //   const blobUrl = window.URL.createObjectURL(blob);
    //   const a = document.createElement("a");
    //   a.href = blobUrl;
    //   a.setAttribute("download", window.decodeURI(res.headers.filename));
    //   a.click();
    // });
    const exportURL =
      "http://10.52.40.23:8080/apps/suppipe-lngtmrws/lngtmrws/storageTank/tagExport";
    const res = await fetch(exportURL, {
      method: "GET",
    });
    // 处理响应,这里假设服务器返回的是Excel文件
    const blob = await res.blob();
    // 创建一个链接元素用于下载
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "罐容表模板.xlsx"; // 指定下载的文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    // 清理URL对象
    window.URL.revokeObjectURL(url);
  };
//数据导入
const handleFileChange = (val: any) => {
    // console.log(selectRowData, "asd");
    if (Object.keys(selectRowData).length === 0) {
      message.warning("请选择一个储罐");
      return;
    }
    setSpinning(true); //加载状态
    const formData = new FormData();
    formData.append("file", val.file);
    service
      .post(
        `/lngtmrws/storageTank/importData?storageTankId=${selectRowData.id}`,
        formData,
        {
          // headers: {
          //   "Content-Type": "x-www-form-urlencoded",
          // },
        }
      )
      .then((res) => {
        if (res.data.code === 0) {
          message.success("上传成功");
          fetchTankVolumn(); //导入成功之后更新一下罐容表
        } else {
          message.error(res.data.msg);
        }
      })
      .catch((error) => {
        setSpinning(false);
        message.error("上传失败");
      })
      .finally(() => {
        setSpinning(false);
      });
  };
  const beforeUpload = () => {
    return false;
  };
<div className="btns">
          <Button
            type="primary"
            style={{ marginRight: "20px" }}
            onClick={() => handleAddOrEdit("add")}
          >
            新增
          </Button>
          <Button
            type="primary"
            onClick={handleExport}
            style={{ marginRight: "20px" }}
          >
            导出模板
          </Button>
          <Upload
            showUploadList={false}
            onChange={handleFileChange}
            beforeUpload={beforeUpload}
          >
            <Button
              type="primary"
              disabled={selectedRowKeys.length == 0 ? true : false}
              icon={<UploadOutlined />}
              title="请至少勾选一个储罐"
            >
              上传罐容表
            </Button>
          </Upload>
        </div>

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值