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函数般调用正则
Apr 08 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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中使用Oracle数据库(4)
2006/10/09 PHP
php查看session内容的函数
2008/08/27 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
jquery easyui使用心得
2014/07/07 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JS原型链怎么理解
2016/06/27 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python快排算法详解
2019/03/04 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
python空元组在all中返回结果详解
2020/12/15 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
个人投资计划书
2014/05/01 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
mysql如何能有效防止删库跑路
2021/10/05 MySQL