前端下载文件

最新推荐文章于 2024-09-17 11:42:54 发布

guyirang

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量125

点赞数

分类专栏：笔记文章标签：前端 javascript html

本文链接：https://blog.csdn.net/guyirang/article/details/127806566

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在前端通过响应拦截处理文件下载，包括检查响应状态、设置文件类型、创建URL、处理文件名乱码问题以及触发文件下载的方法。内容涉及Blob对象、URL.createObjectURL以及利用a标签实现无刷新下载。

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

1.在响应拦截上配置

if(!res.code){

      const resType = Object.prototype.toString.call(res);

      const isBlob = resType === '[object Blob]';

      if (isBlob || resType === '[object String]')

 return response }

2.在接口加上‘blob’属性

3.返回数据进行处理

const link = document.createElement('a');// 创建a标签
    let blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); // 设置文件类型
    link.href = URL.createObjectURL(blob); // 创建URL
     let name = res.headers["content-disposition"].split(';')[1].split('filename=')[1];//获取到文件名但是是乱码
 let fileName=decodeURIComponent(escape(name))
link.download=fileName

    document.body.appendChild(link);
   link.style.display = "none";
    link.click();
    document.body.removeChild(link);