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 参考教程
Dec 29 Javascript
jQuery 源码分析笔记(4) Ready函数
Jun 02 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
php中autoload的用法总结
2013/11/08 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
2010/07/29 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
Django对models里的objects的使用详解
2019/08/17 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
西班牙在线药店:DosFarma
2020/03/28 全球购物
后勤人员岗位职责
2013/12/17 职场文书
2014年护士长工作总结
2014/11/11 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android