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面向对象设计一 工厂模式
Dec 20 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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
浅谈json_encode用法
2015/03/05 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
表单提交验证类
2006/07/14 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
Python 专题三 字符串的基础知识
2017/03/19 Python
Django如何自定义分页
2018/09/25 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
用python实现学生管理系统
2020/07/24 Python
python tkinter实现连连看游戏
2020/11/16 Python
python中实现栈的三种方法
2020/12/19 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
快递业务员岗位职责
2014/01/06 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
公司年会主持词范文!
2019/05/07 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python