vue+axios实现文件下载及vue中使用axios的实例


Posted in Javascript onSeptember 21, 2018

功能:点击导出按钮,提交请求,下载excel文件;

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

vue+axios实现文件下载及vue中使用axios的实例

以及返回了文件流。

第二步:修改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实现文件下载及vue中使用axios的实例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
浅谈javascript错误处理
Aug 11 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
js实现无缝轮播图特效
May 09 Javascript
vue-rx的初步使用教程
Sep 21 #Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 #Javascript
Vue中插入HTML代码的方法
Sep 21 #Javascript
node.js调用C++函数的方法示例
Sep 21 #Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 #Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 #Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 #Javascript
You might like
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
SQL Server笔试题
2012/01/10 面试题
中国梦读书活动总结
2014/07/10 职场文书
银行委托书范本
2014/09/28 职场文书
政协会议宣传标语
2014/10/09 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python