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(笔记)
Oct 06 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
详解vue的diff算法原理
May 20 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
Vue项目中ESlint规范示例代码
Jul 04 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
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
php中file_exists函数使用详解
2015/05/08 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
Js切换功能的简单方法
2010/11/23 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
js编写简易的计算器
2020/07/29 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
python中正则表达式与模式匹配
2019/05/07 Python
解析python实现Lasso回归
2019/09/11 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
大学毕业感言一句话
2014/02/06 职场文书
体操比赛口号
2014/06/10 职场文书
网络营销计划书
2015/01/17 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
导游词之张家口
2019/12/13 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers