react 发post请求 通过a标签 下载pdf文档

const downloadPdf = (blobUrl: any) => {
    const a = document.createElement('a');
    a.download = '报告信息';
    a.href = blobUrl;
    a.click();
  };
export async function exportPdfTable(data: any) {
  return request('/api/pdf/exportPdfTable', {
    method: 'POST',
    responseType: 'blob',
    getResponse: true,
    data,
  });
}
<Button
    onClick={() => {
       const exportPdf = {
          dataList: [
    {
        "projectName": "BYD520TEST",
        "status": "1",
        "sn": "Z4Z9YBTM",
        "confidentialityLevel": "内部",
        "diskId": "0x5000c500a5ff01e6",
        "size": "2000398934016",
        "edition": "CC63",
        "startTime": "0",
        "endTime": "2022-05-20 09:58:16",
        "nodeId": "00000000-0000-0000-0000-3cecef7a738e"
    },
    {
        "projectName": "S5.19",
        "status": "4",
        "sn": "S0M4CS6K0000N5214VZL",
        "confidentialityLevel": "绝密",
        "diskId": "0x5000c5007ef55ad3",
        "size": "600127266816",
        "edition": "B56M",
        "startTime": "2022-05-20 09:56:44",
        "endTime": "2022-05-20 12:00:30",
        "nodeId": "00000000-0000-0000-0000-3cecef7a738e"
    },
    {
        "projectName": "BYD520TEST",
        "status": "1",
        "sn": "WAE0JAYK0000E830FHJS",
        "confidentialityLevel": "内部",
        "diskId": "0x5000c500b788c60f",
        "size": "0",
        "edition": "L363",
        "startTime": "0",
        "endTime": "2022-05-20 09:40:26",
        "nodeId": "00000000-0000-0000-0000-3cecef7a738e"
    },
    {
        "projectName": "S5.19",
        "status": "2",
        "sn": "6XS2VS270000M2504KP7",
        "confidentialityLevel": "绝密",
        "diskId": "0x5000c50054949a0f",
        "size": "900185481216",
        "edition": "0004",
        "startTime": "2022-05-20 09:56:44",
        "endTime": 0,
        "nodeId": "00000000-0000-0000-0000-3cecef7a738e"
    },
    {
        "projectName": "S6",
        "status": "6",
        "sn": "3SK25DW200009128NAR0",
        "confidentialityLevel": "机密",
        "diskId": "0x5000c50028e60527",
        "size": "447450000920",
        "edition": "0008",
        "startTime": "2022-05-20 09:50:28",
        "endTime": "2022-05-20 09:54:36",
        "nodeId": "00000000-0000-0000-0000-3cecef7a738e"
    },
    {
        "projectName": "S5.19",
        "status": "2",
        "sn": "W62DC7SC",
        "confidentialityLevel": "绝密",
        "diskId": "0x5000c5009c38f062",
        "size": "500107862016",
        "edition": "0003LIM1",
        "startTime": "2022-05-20 09:56:44",
        "endTime": 0,
        "nodeId": "00000000-0000-0000-0000-3cecef7a738e"
    },
    {
        "projectName": "S6",
        "status": "4",
        "sn": "3SK25DW200009128NAR0",
        "confidentialityLevel": "机密",
        "diskId": "0x5000c50028e60527",
        "size": "447450000920",
        "edition": "0008",
        "startTime": "2022-05-20 09:54:41",
        "endTime": "2022-05-20 12:48:45",
        "nodeId": "00000000-0000-0000-0000-3cecef7a738e"
    },
    {
        "projectName": "S4",
        "status": "1",
        "sn": "JK11A8BFHST6VF",
        "confidentialityLevel": "机密",
        "diskId": "0x5000cca229d8e6f6",
        "size": "2000398934016",
        "edition": "JKAOA3EA",
        "startTime": "0",
        "endTime": "2022-05-20 10:11:52",
        "nodeId": "00000000-0000-0000-0000-3cecef7a738e"
    },
    {
        "projectName": "S4",
        "status": "1",
        "sn": "JK11A8BFHST6VF",
        "confidentialityLevel": "机密",
        "diskId": "0x5000cca229d8e6f6",
        "size": "2000398934016",
        "edition": "JKAOA3EA",
        "startTime": "0",
        "endTime": 0,
        "nodeId": "00000000-0000-0000-0000-3cecef7a738e"
    },
    {
        "projectName": "BYD520TEST",
        "status": "4",
        "sn": "WD-WX11A40K0613",
        "confidentialityLevel": "内部",
        "diskId": "0x50014ee204687c9c",
        "size": "160041885696",
        "edition": "01.01A01",
        "startTime": "2022-05-20 10:01:09",
        "endTime": "2022-05-20 09:58:16",
        "nodeId": "00000000-0000-0000-0000-3cecef7a738e"
    }
],
          headers: [
               '项目名称',
               '任务结果',
               '介质型号',
               '密级',
               '介质序列号',
               '介质容量',
               '固件版本',
               '开始时间',
               '完成时间',
               '擦除设备',
            ],
         title: '磁盘报告',
      };
      exportPdfTable(exportPdf).then((res: any) => {
	      const blob = new Blob([res.data], { type: 'application/pdf' });
	      const blobUrl = window.URL.createObjectURL(blob);
	      downloadPdf(blobUrl);
		});
	}}
>
   打印
</Button>

防止请求返回值走异常处理

request.interceptors.response.use(async (response) => {
  if (response.url.includes('exportPdfTable')) {
    return response;
  }
  return response;
});

结果:
在这里插入图片描述
在这里插入图片描述
整合版本:

exportPdfTable(exportPdf).then(res=> {
                    const fileName = res.headers?res.headers['content-disposition'].split('=')[1]:'报告信息';
                    const _res = res.data;
                    const blob = new Blob([_res], { type: 'application/pdf' });  //指定打印文件类型pdf
                    const downloadElement = document.createElement('a');
                    const href = window.URL.createObjectURL(blob); // 创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = decodeURI(fileName); // 下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); // 点击下载
                    document.body.removeChild(downloadElement); // 下载完成移除元素
                    window.URL.revokeObjectURL(href); // 释放掉blob对象
                  });
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值