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 ...
随机推荐
- docker数据目录迁移
一.描述 docker默认的数据目录为/var/lib/docker,有的系统数据盘挂载在其他目录下,比如/home为数据盘,这时需要将docker数据目录更改,除了修改docker配置文件的方法,还 ...
- 通过哪吒动漫豆瓣影评,带你分析python爬虫与BeautifulSoup快速入门【华为云技术分享】
久旱逢甘霖 西安连着几天温度排行全国三甲,也许是<哪吒之魔童降世>的剧组买通了老天,从踩着风火轮的小朋友首映开始,就全国性的持续高温,还好今天凌晨的一场暴雨,算是将大家从中暑边缘拯救回来了 ...
- docker的安装及常用命令
一:概述 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器或Windows 机器上,也可以实现虚拟化,容器是完全使用 ...
- 使用 NTP/Chrony 同时 Centos7 网络时间
Network Time Protocol(NTP)是用来使计算机时间同步化的一种协议,它可以使计算机对其服务器或时钟源(如石英钟,GPS等等)做同步化,提供高精准度的时间校正服务. 在 Centos ...
- github配置ssh key
一 初次安装git配置用户名和邮箱 git config --global user.name "xxx" git config --global user.email " ...
- Geoserver2.15.1 配置自带 GeoWebCache 插件发布 ArcGIS Server 瓦片(附配置好的 Geoserver2.15.1 下载)
之前写过一篇关于 Geoserver2.8.5 版本的部署配置发布 ArcGIS Server 瓦片点击查看,那是下载 Geoserver2.8.5 源码编译,重新打包 jar 来部署配置思路的,版本 ...
- 洛谷 题解 P2117 【小Z的矩阵】
这题这么无聊,亏我还用了读入输出优化... 关键在于,这还是道黄题QWQ 掀桌而起 (╯‵□′)╯︵┻━┻ 显而易见,在i != j的情况下,a[i][j] + a[j][i]和a[j][i] + a ...
- Python 命令行之旅:使用 click 实现 git 命令
作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
- Spring Boot 打成的 jar 和普通的 jar 有什么区别 ?
Spring Boot 打成的 jar 和普通的 jar 有什么区别 ? Spring Boot 打成的 jar Spring Boot的项目终止以jar包的形式进行打包,这种jar包可以通过可以通过 ...
- Python的小整数池
此处经常会作为面试题!!! 小整数池目的:节省内存,提高执行效率 需要注意的是:Python实现int的时候有个小整数池.为了避免因创建相同的值而重复申请内存空间所带来的效率问题, Python解释器 ...