ajax实现文件的下载

最新推荐文章于 2024-08-20 10:07:57 发布

YouZi_X

最新推荐文章于 2024-08-20 10:07:57 发布

阅读量2.8k

点赞数

文章标签： ajax okhttp android

本文链接：https://blog.csdn.net/YouZi_X/article/details/133697518

版权

本文介绍了一个使用axios库实现的异步文件下载方法，包括设置响应类型为blob，处理Content-Disposition头信息获取文件名，以及根据不同MIME类型进行文件下载。

摘要由CSDN通过智能技术生成

async downloadFile (row) {
 const res = axios({
    url: '/downloadFileUrl',
    method: 'post',
    responseType: 'blob',
    headers: {
        'Content-Type': 'application/json;charset=UTF-8',
    //  'Accept': 'application/octet-stream',
    },
    data: ids
  })
    .then(res => {
      if (!res.data) {
        return
      }
    // 设置类型，与后端对齐。此处请求headers中已设定类型，如果与使用一致可以不用设置类型
    //const blob =  new Blob([res.data],{type: 'application/force-download'});
      const blob = res.data;
      const downloadUrl = URL.createObjectURL(blob);
      const filename = decodeURL(res.headers['content-disposition'].split("filename="))[1];
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = downloadUrl;
      link.setAttribute('download', filename);
      document.body.appendChild(link);
      link.click();
      // 释放URL对象所占资源
      URL.revokeObjectURL(downloadUrl);
      // 销毁节点
      document.body.removeChild(link);
    })
    .catch(res => {})
}

大致文件下载如上。在使用下载时，根据需要下载文件的类型修改 type 的值进行下载即可。

常见 MIME 类型列表 - HTTP | MDN (mozilla.org)