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 学习之旅 (3)
Feb 05 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
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
How do I change MySQL timezone?
2008/03/26 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
利用javascript查看html源文件
2006/11/08 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
JavaScript字符串对象
2017/01/14 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
Python实现大文件排序的方法
2015/07/10 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
python实现停车管理系统
2018/11/30 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
python实现邮件自动发送
2019/08/10 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
养成教育工作总结
2015/08/13 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers
Docker下安装Oracle19c
2022/04/13 Servers