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 相关文章推荐
javascript 写类方式之四
Jul 05 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
jquery实现带二级菜单的导航示例
Apr 28 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
js实现图片实时时钟
Jan 15 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
Dec 24 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
SONY SRF-M100的电路分析
2021/03/02 无线电
DISCUZ 分页代码
2007/01/02 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP学习 变量使用总结
2011/03/24 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP中list方法用法示例
2016/12/01 PHP
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
python调用支付宝支付接口流程
2019/08/15 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
大学生社团活动总结
2014/04/26 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
物业保安辞职信
2015/05/12 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs