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 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 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
深入解析php模板技术原理【一】
2008/01/10 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
Javascript MD4
2006/12/20 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
Python通过future处理并发问题
2017/10/17 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
警察先进个人事迹材料
2014/05/16 职场文书
硕士生找工作求职信
2014/07/05 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
靠谱的活动总结
2019/04/16 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫