vue.js 使用axios实现下载功能的示例


Posted in Javascript onMarch 05, 2018

本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦

只好回答一下axios如何拦截get请求并下载文件的了。

Ajax无法下载文件的原因

浏览器的GET(frame、a)和POST(form)请求具有如下特点:

response会交由浏览器处理

response内容可以为二进制文件、字符串等

Ajax请求具有如下特点:

response会交由Javascript处理

response内容仅可以为字符串

因此,Ajax本身无法触发浏览器的下载功能。

Axios拦截请求并实现下载

为了下载文件,我们通常会采用以下步骤:

发送请求

获得response

通过response判断返回是否为文件

如果是文件则在页面中插入frame

利用frame实现浏览器的get下载

我们可以为axios添加一个拦截器:

import axios from 'axios'
// download url
const downloadUrl = url => {
 let iframe = document.createElement('iframe')
 iframe.style.display = 'none'
 iframe.src = url
 iframe.onload = function () {
 document.body.removeChild(iframe)
 }
 document.body.appendChild(iframe)
}
// Add a response interceptor
axios.interceptors.response.use(c=> {
 // 处理excel文件
 if (res.headers && (res.headers['content-type'] === 'application/x-msdownload' || res.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
 downloadUrl(res.request.responseURL)
 
 <span style="color:#ff0000;"> res.data='';
 res.headers['content-type'] = 'text/json'
 return res;</span>
 }
 ...
 return res;
}, error => {
 <span style="color:#ff0000;">// Do something with response error
 return Promise.reject(error.response.data || error.message)</span>
})
export default axios

之后我们就可以通过axios中的get请求下载文件了。

以上这篇vue.js 使用axios实现下载功能的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
js实现百度搜索提示框
Feb 05 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 #Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 #Javascript
vue项目中引入noVNC远程桌面的方法
Mar 05 #Javascript
vue项目中使用ueditor的实例讲解
Mar 05 #Javascript
快速处理vue渲染前的显示问题
Mar 05 #Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 #Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 #Javascript
You might like
php获取某个目录大小的代码
2008/09/10 PHP
PHP实现变色验证码实例
2014/01/06 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
详解Angular 4 表单快速入门
2017/06/05 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
神经网络(BP)算法Python实现及应用
2018/04/16 Python
python机器学习实现决策树
2019/11/11 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
python实现感知机模型的示例
2020/09/30 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
团员的自我评价
2013/12/01 职场文书
学习委员自我鉴定
2014/01/13 职场文书
大学生学期个人总结
2015/02/12 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
安全教育培训制度
2015/08/06 职场文书