vue element之axios下载文件(后端Python)
- 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)的更多相关文章
- vue+element UI + axios封装文件上传及进度条组件
1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...
- vue中使用axios下载文件,兼容IE11
一.设置axios返回值为blob 二.使用a标签的down属性下载,如果是IE浏览器,可以使用navigator.msSaveBlob进行下载 // data的数据类型是blob downloadF ...
- springboot整合vue实现上传下载文件
https://blog.csdn.net/yhhyhhyhhyhh/article/details/89888953 文章目录 springboot整合vue实现上传下载文件 1上传下载文件api文 ...
- vue+axios下载文件的实现
HTML代码: <el-button size="medium" @click="download">下载表格</el-button> ...
- Mac 上 Apache Apollo 的安装与运行,和官方下载文件中 Python 实例的演示
前不久我在 Mac 上成功安装了 mosquitto,这次我又试了试安装另一个热门的 broker —— Apache Apollo.对在 Mac 上安装 mosquitto 感兴趣的可以点击查看我的 ...
- vue通过Blob实现下载文件
需求是这样的...... 具体实现,前端拿到后端返回回来的数据,然后通过Blob实现下载,文件内容样式啥的都是后端写的 script代码: 这里的data就是后端返回回来的数据,此方法兼容IE dow ...
- axios 下载文件
axio请求里必须加 responseType: 'blob' 参数,如下 //下载文件 api.download=function(id) { return request({ url: this ...
- ajax axios 下载文件时如何获取进度条 process
最近项目需要做一个下载文件的进度条,看网上上传文件进度条下载,特分享出来方便大家查阅 <!DOCTYPE html> <html> <head> <m ...
- vue中配置axios.js文件,发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
随机推荐
- Delphi7 - Server Monitor开发并实现指定端口定时刷新、重启和邮件提醒等功能
项目背景 近期,总经办邮件反馈考勤数据频繁丢失,请IT排查其根本原因,并提供整改措施. 措不及防,这个项目当初并不是IT主导的,是设备部采购,然后协同软件供应商直接安装.部署和调试的,IT只是提供几个 ...
- 深入解析 ConcurrentHashMap 实现内幕,吊打面试官,没问题
在开发中,我们经常使用 HashMap 容器来存储 K-V 键值对,但是在并发多线程的情况下,HashMap 容器又是不安全的,因为在 put 元素的时候,如果触发扩容操作,也就是 rehash ,就 ...
- SMProxy,让你的数据库操作快三倍!
SMProxy GITHUB:https://github.com/louislivi/smproxy 喜欢请star 中文 | English /$$$$$$ /$$ /$$ /$$$$$$$ /$ ...
- 《一张图看懂华为云BigData Pro鲲鹏大数据解决方案》
8月27日,华为云重磅发布了业界首个鲲鹏大数据解决方案--BigData Pro.该方案采用基于公有云的存储与计算分离架构,以可无限弹性扩容的鲲鹏算力作为计算资源,以支持原生多协议的OBS对象存储服务 ...
- iOS textView的使用总结
转自:http://blog.csdn.net/zhaopenghhhhhh/article/details/11597887 在.h文件中声明: @interface ProtocolViewCon ...
- 使用 nginx 实现虚拟主机
当多个系统需要部署的时候,有系统访问很小,为了节省成本,就需要将多个系统部署到同一台服务器上,怎么在同一台服务器上,完成不同系统的部署和访问,就需要使用虚拟主机实现. 使用端口实现虚拟主机 配置 ng ...
- [TimLinux] Python3 Coverity zeep/SOAP 库使用示例
废话不多说,上代码: # 基于Coverity的示例 from zeep import Client from zeep.wsse.username import UsernameToken conf ...
- Java的值类型和引用类型
一.问题描述 前几天因为一个需求出现了Bug.说高级点也挺高级,说白点也很简单.其实也就是一个很简单的Java基础入门时候的值类型和引用类型的区别.只是开发的时候由于自己的问题,导致小问题的出现.还好 ...
- 大数据之Linux服务器集群搭建
之前写过一篇关于Linux服务器系统的安装与网关的配置,那么现在我们要进一步的搭建多台Linux服务器集群. 关于单台服务器的系统搭建配置就不在赘述了,详情见https://www.cnblogs.c ...
- 使用 Ocelot 匹配路由的方法匹配路由
使用 Ocelot 匹配路由的方法匹配路由 Intro 之前我们在 Ocelot 网关的基础上自定义了一个认证授权的 Ocelot 中间件,根据请求的路径和 Method 进行匹配,找到对应的权限配置 ...