怎么在vue.js中利用axios实现一个下载功能-创新互联

怎么在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

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联成都网站设计公司行业资讯频道，感谢您对创新互联成都网站设计公司的支持。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：怎么在vue.js中利用axios实现一个下载功能-创新互联
文章起源：http://6mz.cn/article/ehdhp.html