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代码
Dec 15 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
ES6 Generator基本使用方法示例
Jun 06 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python使用Matplotlib画条形图
2020/03/25 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
python中pow函数用法及功能说明
2020/12/04 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
二手书店创业计划书
2014/01/16 职场文书
创业计划书之旅游网站
2019/09/06 职场文书