使用axios下载文件流

zhao1949

于 2021-07-13 09:13:37 发布

阅读量990

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/zhao1949/article/details/118692048

版权

javascript 专栏收录该内容

19 篇文章

订阅专栏

在vue项目中使用axios下载zip文件时，可能会遇到打开提示文件损坏的问题。解决方法是在axios请求配置中设置'responseType'为'blob'，并添加headers：{'Content-Type': 'application/json; application/octet-stream'}。这样可以确保正确处理文件流，避免文件损坏。

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

https://www.jianshu.com/p/ea9e96a4d084

https://www.jianshu.com/p/a79c176688de

axios({
      method: "post",
      url: "你的url"
      // 这里可以在header中加一些东西，比如token
    })
      .then(res => {
        console.log("response: ", res);
        // new Blob([data])用来创建URL的file对象或者blob对象
        let url = window.URL.createObjectURL(new Blob([res.data])); 
        // 生成一个a标签
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        // 生成时间戳
        let timestamp=new Date().getTime();   
        link.download = timestamp + ".pdf";   
        document.body.appendChild(link);
        link.click();
      })
      .catch(error => {
        console.log("response: ", error);
      });