fetch的文件流下载及下载进度获取
- 下载过程中,获取进度,fetch API并没有提供类似xhr和ajax的 progress所以用 getReader()来循环读取大小
let size = 0;
fetch( URL() + `/sys/file/download/${uuid}`,{
method: 'GET',
headers:{
token,
}
})
.then(response => {
if(response.ok){
return response;
}else{
console.log("请求失败")
}
})
// 取出body
.then(response => response.body)
.then(body => {
const reader = body.getReader();
return new ReadableStream({
start(controller) {
return pump();
function pump() {
return reader.read().then(res => { //res ({ done, value })
// 读不到更多数据就关闭流
console.log(res,"res");
const {done,value } = res;
if (done) {
console.log("end")
controller.close();
// return;
}
size += value.length || 0;
console.log(size,"size")
// 将下一个数据块置入流中
controller.enqueue(value);
return pump();
});
}
}
})
})
.then(stream => new Response(stream))
.then(response => that.savingFile(response,fileName))
.catch(err => console.error(err));
- 上一步中接收到文件流后,通过Blob和a标签进行下载
savingFile = (response,fileName) => {
const that = this;
response.blob().then( blob => {
if(typeof FileReader === 'undefined'){
notification.open({
message:'您的浏览器不支持 FileReader,请升级浏览器',
icon: <Icon type="smile" style={{ color: '#108ee9' }} />
})
}
const reader = new FileReader();
reader.addEventListener("loadend", function() {
let resu = '';
try{
resu = JSON.parse( reader.result);
// resu = eval('('+ reader.result + ')')
if(resu.code == 500){
notification.open({
message:resu.msg,
icon: <Icon type="smile" style={{ color: '#108ee9' }} />
})
}else if(resu.code == 401){
notification.error({
message:resu.msg
})
}
}catch(e){
//捕获错误 说明是文本字符串
resu = reader.result;
downloadBlob(blob,fileName);
}
});
reader.readAsText(blob);
//下载
function downloadBlob(blob,fileName){
let blobUrl = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = blobUrl;
a.target = '_blank';
a.style.display = 'none'
document.body.appendChild(a)
a.download = fileName;
a.click();
window.URL.revokeObjectURL(blobUrl);
document.body.removeChild(a)
that.setState({
downloading:false
})
}
})
}
总结一下: 这种前端下载的方式,感觉体验还不是很好。主要考虑是文件流的下载方式,是先下载完全部数据才弹出保存窗口,而大部分软件下载的网站是用a标签直接下载的。这样是先弹出窗口,再利用浏览器的下载工具进行下载,虽然少了一些定制显示,但用户体验上应该会好一点。 再找个下载文件的网站参考参考。
fetch的文件流下载及下载进度获取的更多相关文章
- Web Api 将DataTable装换成Excel,并通过文件流将其下载
不废话,直接上代码 前端代码 <input type="button" class="layui-btn" value="Test-GetFil ...
- 后台返回excel文件流,js下载
/** 下载excel */ downloadExcel(data: Blob): void { var blob = new Blob([data], { type: 'application/vn ...
- 七、springBoot 简单优雅是实现文件上传和下载
前言 好久没有更新spring Boot 这个项目了.最近看了一下docker 的知识,后期打算将spring boot 和docker 结合起来.刚好最近有一个上传文件的工作呢,刚好就想起这个脚手架 ...
- js上传文件获取文件流
上传文件获取文件流 <div> 上传文件 : <input type="file" name = "file" id = "file ...
- ASP.NET 实现Base64文件流下载PDF
因为业务需要调用接口获取的是 Base64文件流 需要提供给客户下载PDF文档 源码部分借鉴网上,具体地址忘记了. //Base64文件流 byte[] buffer = Convert.FromBa ...
- koa2基于stream(流)进行文件上传和下载
阅读目录 一:上传文件(包括单个文件或多个文件上传) 二:下载文件 回到顶部 一:上传文件(包括单个文件或多个文件上传) 在之前一篇文章,我们了解到nodejs中的流的概念,也了解到了使用流的优点,具 ...
- .NET客户端下载SQL Server数据库中文件流保存的大电子文件方法(不会报内存溢出异常)
.NET客户端下载SQL Server数据库中文件流保存的大电子文件方法(不会报内存溢出异常) 前段时间项目使用一次性读去SQL Server中保存的电子文件的文件流然后返回给客户端保存下载电子文件, ...
- asp.net已流的方式下载文件
string filePath = context.Server.MapPath("~/" + uploadFolder+"/"+file_name);//路径 ...
- Android OkHttp文件上传与下载的进度监听扩展
http://www.loongwind.com/archives/290.html 上一篇文章介绍了用Retrofit实现文件的上传与下载,但是我们发现没办法监听上传下载的进度,毕竟我们在做开发的时 ...
随机推荐
- CentOS7出现Unit iptables.service could not be found
CentOS7默认的防火墙不是iptables,而是firewalle. 出现此情况可能是iptables防火墙未安装. #停止firewalld服务 systemctl stop firewalld ...
- [转]Android使用WebView定位问题
文章转自:https://www.jianshu.com/p/d32d3641741f 最近遇到了一个问题,有一个需求是使用 WebView 来加载一个网页url,H5通过js来获取位置定位信息.以前 ...
- PHP上传超大文件解决方案
一提到大文件上传,首先想到的是啥??? 没错,就是修改php.ini文件里的上传限制,那就是upload_max_filesize.修改成合适参数我们就可以进行愉快的上传文件了.当然啦,这是一般情况下 ...
- spring-boot集成8:集成shiro,jwt
Shrio是一个轻量级的,基于AOP 和 Servlet 过滤器的安全框架.它提供全面的安全性解决方案,同时在 Web 请求级和方法调用级处理身份确认和授权. JWT(JSON Web Token)是 ...
- STS中AOP的实现
1. 在pom.xml中加入aop依赖: <groupId>org.springframework.boot</groupId> <artifactId>sprin ...
- python之xml数据解析
因为项目需求需要查询一些网站的ALEXA排名,百度后得到的方法是,访问http://data.alexa.com/data?cli=10&dat=snbamz&url=%YOURURL ...
- centos7 的system
1.vim /etc/systemd/system/alertmanager.service [Unit] Description=Alertmanager After=network-online. ...
- git 命令 查看历史提交 git log
怎么理解git commit 命令 git commit 相当于 我们虚拟机快照操作,每次执行commit命令 相当于对本地仓库做一次快照,保存了当时仓库的状态, git commit -m 加上的& ...
- kafka原理和操作
参考: 原理: https://www.cnblogs.com/yinzhengjie/p/9780976.html 常用配置参数: https://www.cnblogs.com/yinzhengj ...
- Second largest node in the BST
Find the second largest node in the BST 分析: 如果root有右节点,很明显第二大的node有可能在右子树里.唯一不满足的条件就是右子树只有一个node. 这个 ...