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 ...
随机推荐
- 谁说微服务是Spring Cloud的独角戏?Service Mesh了解一下?
Service Mesh 的概念自 2017 年初提出之后,受到了业界的广泛关注,作为微服务的下一代发展架构在社区迅速发酵,并且孵化出了诸如 Istio 等广受业界关注的面向于云原生 (Cloud N ...
- 区块链学习笔记:D04 区块链在各行业领域的应用(二)
这节课主要是政务领域.版权存证领域.能源领域的应用案例介绍 1.房屋租赁联盟链 特点:真实可信.透明补贴.便于追溯.公共监督 节点:房屋运营节点.房管局节点.社保局节点.财政局节点.教育部门节点(多节 ...
- 基于VMware Workstation下CentOS的搭建
网络安全学习内容 二.VMware安装CentOS系统 需要准备的文件: 从http://mirrors.huaweicloud.com/centos/7.7.1908/isos/x86_64/中下载 ...
- git 使用详解(7)-- 远程仓库的使用
要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库.远程仓库是指 托管在网络上 的项目仓库,可能会有好多个,其中有些你 只能读,另外有些可以写.同他人协作开发某个项目时,需要管理这些远程 ...
- 学习go语言第二天-变量、常量
编写测试程序 源码文件以_test结尾;例如:xxx_test.go 测试方法名以Test开头;例如:func TestXXXXX(t *testing.T){} 实现斐波那且数列 package f ...
- HDU1847 Good Luck In CET4 Everybody
大学英语四级考试就要来临了,你是不是在紧张的复习?也许紧张得连短学期的ACM都没工夫练习了,反正我知道的Kiki和Cici都是如此.当然,作为在考场浸润了十几载的当代大学生,Kiki和Cici更懂得考 ...
- unix环境高级编程中的err_quit,err_sys用到的知识点
unix环境高级编程中的err_quit,err_sys 环境 os CentOS release 6.7 (Final) gcc 4.4.7 c语言预备知识 标准输入输出文件 在linux系统中一切 ...
- 【Redis】270- 你需要知道的那些 redis 数据结构
本文出自「掘金社区」,欢迎戳「阅读原文」链接和作者进行技术交流 ?? 作者简介 世宇,一个喜欢吉他.MDD 摄影.自走棋的工程师,属于饿了么上海物流研发部.目前负责的是网格商圈.代理商基础产线,平时喜 ...
- 【IntelliJ Idea】使用学习
[IntelliJ Idea]使用学习 转载:https://www.cnblogs.com/yangchongxing/p/10658259.html 目录 ==================== ...
- Cisco学习记录(一):Cisco Packet Tracer官网下载方法
通过Cisco Packet Tracer学习计算机网络知识 本人大三狗一枚,一直以来都在学java, python, web开发的我,经过一番决定,毅然决然要开始深入学习计算机网络!通过Cisco ...