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 相关文章推荐
取得传值的函数
Oct 27 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
vue自定义树状结构图的实现方法
Oct 18 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线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP错误机制知识汇总
2016/03/24 PHP
javascript第一课
2007/02/27 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python threading多线程编程实例
2014/09/18 Python
Python实现控制台进度条功能
2016/01/04 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
详解django自定义中间件处理
2018/11/21 Python
Python 一句话生成字母表的方法
2019/01/02 Python
python线程中的同步问题及解决方法
2019/08/29 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
中学生自我鉴定
2014/02/04 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
结婚司仪主持词
2015/06/29 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书