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 ...
随机推荐
- springmvc运行流程简单解释(源码解析,文末附自己画的流程图)
首先看一下DispatcherServlet结构: 观察HandlerExecutionChain对象的创建与赋值,这个方法用来表示执行这个方法的整条链. 进入getHandler方法: 此时的变量h ...
- 2019-2020-1 20199304《Linux内核原理与分析》第七周作业
进程的描述和进程的创建 1.进程描述 1.1操作系统的三大管理功能以及对应的抽象概念: 进程管理 内存管理 文件系统 1.2Linux进程的状态: (1)Linux中进程的状态细分可以分为七种: R运 ...
- 使用python实现http服务器
主要使用python实现了一个http服务器.http服务器实现了用户的注册和登录的简单功能,当然还可以继续扩展. 数据的存储使用的是文件,有兴趣的话可以使用数据库进行存储.当然根据个人兴趣而定. 本 ...
- luogu P1840 Color the Axis_NOI导刊2011提高(05)|并查集
题目描述 在一条数轴上有N个点,分别是1-N.一开始所有的点都被染成黑色.接着我们进行M次操作,第i次操作将[Li,Ri]这些点染成白色.请输出每个操作执行后剩余黑色点的个数. 输入格式 输入一行为N ...
- 使用flink实现一个topN的程序
topN功能是一个非常常见的功能,比如查看最近几分钟的阅读最高数,购买最高数. flink实现topN的功能也非常方便,下面就开始构建一个flink topN的程序. 还是像上篇博客一样,从kafka ...
- ARTS-S EN0002-London HIV patient's remission spurs hope for curing AIDS
原文 A stem-cell treatment put a London cancer patient's HIV into remission, marking the second such r ...
- C#异步编程看这篇就够了
随着.NET Core的流行,相信你现在的代码中或多或少的会用到async以及await吧!毕竟已成标配.那么我们为什么要用async以及await呢?其实这是微软团队为我们提供的一个语法糖,让我们不 ...
- linux—netstat
netstat--option -a: 列出所有端口,监听的没有监听的 -t: 显示tcp相关的选项 -u: 显示udp相关的选项 -l: 仅仅显示监听选项 -p: 显示与连接有关的程序名和 ...
- 【Gitlab】371- GitLab从安装到全自动化备份一条龙
原文地址[1]欢迎star 需求 1.在新服务器上安装并搭建好gitlab2.手动+自动将旧服务器上的gitlab备份3.手动+自动将gitlab备份包scp到新服务器上4.手动+自动恢复新服务器上的 ...
- 【Vuejs】350- 学习 Vue 源码的必要知识储备
前言 我最近在写 Vue 进阶的内容.在这个过程中,有些人问我看 Vue 源码需要有哪些准备吗?所以也就有了这篇计划之外的文章. 当你想学习 Vue 源码的时候,需要有扎实的 JavaScript 基 ...