React 文件下载(Url or Blob二进制数据)

根据请求返回url链接下载:

export async function downloadFile(url: string, fileName: string, fileType: string) {
  fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': `application/${fileType}`,//配置下载类型 fileType比如pdf
    },
  })
    .then((response) => response.blob())
    .then((blob) => {
      // Create blob link to download
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', `${fileName}.${fileType}`);

      // Append to html link element page
      document.body.appendChild(link);

      // Start download
      link.click();

      // Clean up and remove the link
      link.parentNode.removeChild(link);
    });
}

根据blob下载文件:

当请求结果是二进制数据则需要使用JavaScript的Blob对象来创建和操作二进制数据

注意(一):请求体中配置  responseType: 'blob'
 

axios({
      url: 'https://test-console.xxx.com/fileName......',
      method: 'POST',
      data: formData,
      responseType: 'blob',
    }).then((response) => {
       console.log('response:', response);
    });

或者在封装好的http请求接口中

//以下为封装的部分代代码片段,举例用
interface HttpProps {
  url: string;
  method?: Method; //非必传 默认post
  data?: any; //post\put\patch请求格式
  options?: AxiosRequestConfig;
  headers?: any;
  errorMsg?: string;
  params?: any; //get\delete请求入参格式为params
}
const request = async (httpProps: HttpProps) => {
  try {
    const {
      url,
      method = 'post',
      data,
      options,
      params,
      headers = {},
    } = httpProps;
    const response = await instance({
      method,
      url,
      data,
      headers,
      params,
      ...options,
    });
    if (response.status === 200) {
      return (response && response.data) || { data: {} };
    }
  } catch (error) {
    return Promise.reject(error.message);
  }
};

export { request };
/**
 * 获取文件下载地址
 * @param id
 * @returns
 */
export const requestReportFileUrl = (id) => {
  return request({
    method: 'get',
    url: `${host}/download/${id}`,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    options: {
      responseType: 'blob',
    },
  });
};

blob下载封装方法:

export async function downloadFile(data: any, fileName: string,fileType: string) {
  const link = document.createElement('a');
  const objectUrl = URL.createObjectURL(
    new Blob([data], { type: `application/${fileType}` })
  ); // 创建URL
  link.href = objectUrl;
  link.download = fileName; // 自定义文件名
  link.click(); // 下载文件
  URL.revokeObjectURL(objectUrl); // 释放内存
  document.body.removeChild(link);
}

调用(下载一个pdf):
res

 downloadFile(res, reportId,'pdf');

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React中,将Base64文件流转换为Blob并进行下载可以使用以下代码: ```javascript // 假设有一个Base64文件流 const base64String = "SGVsbG8gV29ybGQh"; const fileName = "example.txt"; // 下载文件文件名 // 将Base64文件流转换为Blob对象 const byteCharacters = atob(base64String); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); const blob = new Blob([byteArray], { type: "application/octet-stream" }); // 创建下载链接 const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = fileName; // 触发下载 document.body.appendChild(link); link.click(); // 清理下载链接 document.body.removeChild(link); URL.revokeObjectURL(url); ``` 这段代码首先将Base64文件流转换为Uint8Array类型的二进制数据,然后使用Blob构造函数将其转换为Blob对象,类型为`application/octet-stream`,表示通用的二进制文件类型。接着使用`URL.createObjectURL()`方法将Blob对象生成一个下载链接,然后创建一个`<a>`标签,将下载链接赋值给`href`属性,并设置`download`属性为下载文件文件名。最后将`<a>`标签添加到页面中,并通过`click()`方法触发下载。最后清理下载链接,释放内存。 注意:在React中,最好将这段代码放在组件的事件处理函数中,例如按钮的`onClick`事件处理函数中,以避免React的生命周期问题。另外,为了避免跨域问题,最好将下载链接放在与当前页面相同的域名下。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值