怎么在vue中使用axios下载文件

本篇文章为大家展示了怎么在vue中使用axios下载文件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

功能：点击导出按钮，提交请求，下载excel文件；

第一步：跟后端童鞋确认交付的接口的response header设置了

以及返回了文件流。

第二步：修改axios请求的responseType为blob，以post请求为例：

axios({   method: 'post',   url: 'api/user/',   data: {     firstName: 'Fred',     lastName: 'Flintstone'   },   responseType: 'blob' }).then(response => {   this.download(response) }).catch((error) => { })

第三步：请求成功，拿到response后，调用download函数（创建a标签，设置download属性，插入到文档中并click）

methods: {   // 下载文件   download (data) {     if (!data) {       return     }     let url = window.URL.createObjectURL(new Blob([data]))     let link = document.createElement('a')     link.style.display = 'none'     link.href = url     link.setAttribute('download', 'excel.xlsx')     document.body.appendChild(link)     link.click()   } }

下面在通过实例代码看下vue中使用axios

1.安装axios

npm：

$ npm install axios -S

cdn：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.配置axios

在项目中新建api/index.js文件，用以配置axios

api/index.js

import axios from 'axios'; let http = axios.create({  baseURL: 'http://localhost:8080/',  withCredentials: true,  headers: {   'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'  },  transformRequest: [function (data) {   let newData = '';   for (let k in data) {    if (data.hasOwnProperty(k) === true) {     newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';    }   }   return newData;  }] }); function apiAxios(method, url, params, response) {  http({   method: method,   url: url,   data: method === 'POST' || method === 'PUT' ? params : null,   params: method === 'GET' || method === 'DELETE' ? params : null,  }).then(function (res) {   response(res);  }).catch(function (err) {   response(err);  }) } export default {  get: function (url, params, response) {   return apiAxios('GET', url, params, response)  },  post: function (url, params, response) {   return apiAxios('POST', url, params, response)  },  put: function (url, params, response) {   return apiAxios('PUT', url, params, response)  },  delete: function (url, params, response) {   return apiAxios('DELETE', url, params, response)  } }

这里的配置了POST、GET、PUT、DELETE方法。并且自动将JSON格式数据转为URL拼接的方式

同时配置了跨域，不需要的话将withCredentials设置为false即可

并且设置了默认头部地址为：http://localhost:8080/，这样调用的时候只需写访问方法即可

3.使用axios

注：PUT请求默认会发送两次请求，第一次预检请求不含参数，所以后端不能对PUT请求地址做参数限制

首先在main.js中引入方法

import Api from './api/index.js'; Vue.prototype.$api = Api;

然后在需要的地方调用即可

this.$api.post('user/login.do(地址)', {   "参数名": "参数值" }, response => {    if (response.status >= 200 && response.status < 300) {     console.log(response.data);\\请求成功，response为成功信息参数    } else {     console.log(response.message);\\请求失败，response为失败信息    } });

上述内容就是怎么在vue中使用axios下载文件，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。