antd下载文件小结

下载的核心方法

export const contextPath = process.env.NODE_ENV === 'production' ? '/portal' : ''; //'/portal' 对应后台的 springboot 的contextPath

import { contextPath } from '../../../custom/contants.js';

 downLoad =(fileKey,fileName)=>{
    const params = {fileKey : fileKey};
    const downloadUrl = contextPath+'/api/regulated/info/file/downLoad';
    fetch(downloadUrl, {
      method: 'POST',
      body: window.JSON.stringify(params),
      credentials: 'include',
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    }).then((response) => {
      response.blob().then(blob => {
        const aLink = document.createElement('a');
        document.body.appendChild(aLink);
        aLink.style.display='none';
        const objectUrl = window.URL.createObjectURL(blob);
        aLink.href = objectUrl;
        aLink.download = fileName;
        aLink.click();
        document.body.removeChild(aLink);
      });
    }).catch((error) => {
      console.log(error);
    });
  };

<a onClick={()=>this.downLoad(item.fileKey,item.fileName)}>下载</a>

参考文档:React使用Post方式从服务器下载文件
react文件下载以及a.download下载的坑
React中使用fetch实现文件上传下载(https://blog.csdn.net/qq8241994/article/details/82971233)

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值