vue.js 使用axios实现下载功能

Ajax无法下载文件的原因

浏览器的GET(frame、a)和POST(form)请求具有如下特点:

    response会交由浏览器处理
    response内容可以为二进制文件、字符串等

Ajax请求具有如下特点:

    response会交由Javascript处理
    response内容仅可以为字符串

因此,Ajax本身无法触发浏览器的下载功能。
Axios拦截请求并实现下载

为了下载文件,我们通常会采用以下步骤:

    发送请求
    获得response
    通过response判断返回是否为文件
    如果是文件则在页面中插入frame
    利用frame实现浏览器的get下载

我们可以为axios添加一个拦截器:

 

    import axios from ‘axios‘
     
    // download url
    const downloadUrl = url => {
      let iframe = document.createElement(‘iframe‘)
      iframe.style.display = ‘none‘
      iframe.src = url
      iframe.onload = function () {
        document.body.removeChild(iframe)
      }
      document.body.appendChild(iframe)
    }
     
    // Add a response interceptor
    axios.interceptors.response.use(c=> {
      // 处理excel文件
      if (res.headers && (res.headers[‘content-type‘] === ‘application/x-msdownload‘ || res.headers[‘content-type‘] === ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet‘)) {
        downloadUrl(res.request.responseURL)
        
        res.data=‘‘;
        res.headers[‘content-type‘] = ‘text/json‘
        return res;
      }
      ...
      return res;
    }, error => {
      // Do something with response error
      return Promise.reject(error.response.data || error.message)
    })
    export default axios

 res.data=‘‘;
    res.headers[‘content-type‘] = ‘text/json‘
    return res;
  }
  ...
  return res;
}, error => {
  // Do something with response error
  return Promise.reject(error.response.data || error.message)
})
export default axios

 

 

 

之后我们就可以通过axios中的get请求下载文件了。

 

 

 
结束

主要代码来自:https://www.zhihu.com/question/263323250/answer/267842980

 

另一种方法
---------------------
作者:seanxwq
来源:CSDN
原文:https://blog.csdn.net/seanxwq/article/details/78975661
版权声明:本文为博主原创文章,转载请附上博文链接!

 

由于兼容性等问题,其实导出直接用链接更方便一些,兼容性也好,参数不是很多的话放在请求路径后面也是ok的,具体如下:

     //导出
        exportOrderList() {
          this.formItem.token = Cookies.get(‘token‘);
          let param = "";
          for(let field in this.formItem) {
            if(this.formItem[field]) {
              param += field + "=" + this.formItem[field] + "&";
            }
          }
          param = param.substring(0, param.length-1);
          let url = "api/queryListExport?" + param;
          window.location.href = url;
        },

关键就是这句哦:

window.location.href = url;
---------------------
作者:seanxwq
来源:CSDN
原文:https://blog.csdn.net/seanxwq/article/details/78975661
版权声明:本文为博主原创文章,转载请附上博文链接!

vue.js 使用axios实现下载功能

上一篇:vue axios使用,axios的封装


下一篇:Android 移除 BatteryService 服务