vue+axios+element-ui实战（三）--post请求a标签下载处理

最新推荐文章于 2023-09-25 08:16:00 发布

hxf6060

最新推荐文章于 2023-09-25 08:16:00 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： post请求下载 axios vue Blob流文件

本文链接：https://blog.youkuaiyun.com/hxf6060/article/details/88813784

本文介绍了在Vue项目中，如何处理后端通过POST请求返回的文件流进行下载。当后端接口为POST请求时，不能直接通过超链接下载。文章详细讲解了如何利用Blob对象和URL.createObjectURL方法，结合axios设置responseType为blob，实现文件下载。同时，考虑到IE10以下浏览器的兼容性问题，文中提出了使用navigator.msSaveBlob的解决方案。

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

开发时时常遇到下载的功能，如果后端设计的是get请求，我们只需采用超链接的方式，让浏览器自动下载。但是post请求的时候，后端返回的是一个文件流，如下图：

而请求头里面的content-type也跟平常的application/json;charset=UTF-8不一样：

所以我们根据请求头的不同，可以将代码统一封装在request.js里面：(可以查看上一篇封装方法)

if (response.headers['content-type'] === 'application/octet-stream;charset=utf-8') { // 下载流文件
      let content = response.headers['content-disposition'] 
      let index = content.indexOf('fileName=')
      let fileName = content.substring(index + 9) // 截取文件名
      fileName = decodeURIComponent(fileName)
      if ('download' in document.createElement('a')) { // 非IE下载
        let url = window.URL.createObjectURL(