怎么在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)    <span > res.data='';  res.headers['content-type'] = 'text/json'  return res;</span>  }  ...  return res; }, error => {  <span >// Do something with response error  return Promise.reject(error.response.data || error.message)</span> }) export default axios

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。