vue.js 使用axios实现下载功能 - 源l - 博客园

安宇雨 - 随手采集
2024-06-13 09:58:48
随手采集
0000-未整理-等待研究

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请求下载文件了。

_
结束

另一种方法
---------------------

由于兼容性等问题，其实导出直接用链接更方便一些，兼容性也好，参数不是很多的话放在请求路径后面也是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;

; "复制代码")

原网址: 访问
创建于: 2024-06-13 09:58:48
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论