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 相关文章推荐
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 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
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
Bootstrap插件全集
2016/07/18 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
django 模版关闭转义方式
2020/05/14 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
岗位明星事迹材料
2014/05/18 职场文书
公司董事长岗位职责
2014/06/08 职场文书
小学语文复习计划
2015/01/19 职场文书
自信主题班会
2015/08/14 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
小学三年级作文之写景
2019/11/05 职场文书
python中%格式表达式实例用法
2021/06/18 Python
解决vue中provide inject的响应式监听
2022/04/19 Vue.js