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中filter(),not(),split()使用方法
Jul 06 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
vue实现购物车加减
May 30 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数组应该有多大的分析
2009/07/30 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
Weblogc domain问题
2014/01/27 面试题
extern在函数声明中是什么意思
2014/01/19 面试题
数据库面试要点基本概念
2013/10/31 面试题
2016年六一文艺汇演开幕词
2016/03/04 职场文书