vue element中axios下载文件(后端Python)


Posted in Javascript onMay 10, 2019

•axios 接受文件流,需要设置 {responseType:'arraybuffer'}

axios.post(
  apiUrl,
  formdata, 
  {responseType:'arraybuffer'}
).then(res=> {
if (res.status === 200) {
 
let blob = new Blob([res.data], {
 
 type: res.headers['content-type']
 
 });

 
 const fileName = res.headers['content-disposition'];

 const title = fileName && (fileName.indexOf('filename=') !== -1) ? fileName.split('=')[1] : 'download';


  require('script-loader!file-saver');

 saveAs(blob, title);
} 
})
.catch();

注: axios 中 response 表示服务器响应的数据类型,可以是 arraybuffer , blob, document , json , text , stream . 默认为: json

•后端发送文件:Python

from flask import send_from_directory
@admin_bp.route('/tasksothers/download', methods=["GET", "POST"])
@auth.login_required
def api_tasksothers_download():
    root_path = ''
    src_name = "a.sql"
    upload_path = os.path.join(root_path, src_name)
    print("upload_path =", upload_path)
    if os.path.isfile(upload_path):
      response = send_from_directory(root_path, src_name, as_attachment=True)
      print("response: ",response)

      response.headers["Access-Control-Expose-Headers"] = "Content-disposition"
      print("response: ", response.headers)
      return response

注: 如果 response.header 中没有添加  Access-Control-Expose-Headers 这个参数(代表:服务器允许浏览器访问的头(headers)的白名单),vue中就无法获取 content-disposition,即 res.headers['content-disposition'];无法找到

总结

以上所述是小编给大家给大家介绍的vue element中axios下载文件(后端Python),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 #Javascript
简单通过settimeout看javascript的运行机制
May 10 #Javascript
详解js实时获取并显示当前时间的方法
May 10 #Javascript
JS获取本地地址及天气的方法实例小结
May 10 #Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 #Javascript
vue无限轮播插件代码实例
May 10 #Javascript
js中的深浅拷贝问题简析
May 10 #Javascript
You might like
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Vince官网:全球著名设计师品牌,休闲而优雅的服饰
2017/01/15 全球购物
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
标准导师推荐信(医学类)
2013/10/28 职场文书
五年级科学教学反思
2014/02/05 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2014年秘书工作总结
2014/11/25 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript