ant design下载

coderMozart

于 2021-10-12 19:34:50 发布

阅读量443

点赞数

分类专栏： JavaScript 文章标签： html javascript

本文链接：https://blog.csdn.net/coderMozart/article/details/120730352

版权

JavaScript 专栏收录该内容

66 篇文章

订阅专栏

本文详细介绍了如何使用Axios从后端获取blob数据，并通过创建ObjectURL和a标签实现文件下载。主要步骤包括设置响应类型为blob，创建Blob对象，生成download URL，创建并触发a标签下载，最后释放ObjectURL。此方法适用于现代浏览器，包括对HTML5 download属性的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相关代码

基本原理根据返回的blob数据，利用 window.URL.createObjectURL生成url,通过 a 标签下载

  const downloadFileByURL = async (url, filename) => {
    const { data } = await axios({
      method: 'get',
      url: BASE_URL + url,
      responseType: 'blob',
      withCredentials: true,
      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
    });
    const blob = new Blob([data], { type: 'application/octet-stream' });
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = downloadUrl;
    link.setAttribute('download', filename);
    // Safari thinks _blank anchor are pop ups. We only want to set _blank
    // target if the browser does not support the HTML5 download attribute.
    // This allows you to download files in desktop safari if pop up blocking
    // is enabled.
    if (typeof link.download === 'undefined') {
      link.setAttribute('target', '_blank');
    }
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(downloadUrl);
  };