fetch的文件流下载及下载进度获取
时间:2019-08-19
本文章向大家介绍fetch的文件流下载及下载进度获取,主要包括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标签直接下载的。这样是先弹出窗口,再利用浏览器的下载工具进行下载,虽然少了一些定制显示,但用户体验上应该会好一点。 再找个下载文件的网站参考参考。
原文地址:https://www.cnblogs.com/chengyunshen/p/11376735.html
- CNN模型之ShuffleNet
- 目标检测算法之SSD
- Hadoop学习笔记
- 利用硬链接和truncate降低drop table对线上环境的影响
- 手把手教你实现GAN半监督学习
- 【超全】C语言小白最容易犯的17种错误,你中了几个?
- Oracle 12.2新特性掌上手册 - 第五卷 RAC and Grid
- ResNet, AlexNet, VGG, Inception: 理解各种各样的CNN架构
- 机器学习实战---线性回归提高篇之乐高玩具套件二手价预测
- 【Oracle12.2新特性掌上手册】-第八卷 PDB的快速创建与移除
- 《机器学习实战》学习笔记(十一):线性回归基础篇之预测鲍鱼年龄
- 你必须要知道CNN模型:ResNet
- CNN模型之SqueezeNet
- YOLO算法的原理与实现
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 中自定义ContentProvider与ContentObserver的使用简单实例
- Android沉浸式状态栏的实现代码
- MyBatis源码解析之基础模块—DataSource
- Android中Activity和Fragment传递数据的两种方式
- Android MTU 值修改的实例详解
- Android ListView填充数据的方法
- AFURLSessionManager 上传下载使用代码说明
- Android APP之WebView校验SSL证书的方法
- Android中okhttp3使用详解
- Android中RecyclerView实现Item添加和删除的代码示例
- 小程序图片上传,存储,获取,显示(含源码)
- Android网络请求框架Retrofit详解
- Android控件RadioButton实现多选一功能
- 解决Android使用Handler造成内存泄露问题
- Android中imageView图片放大缩小及旋转功能示例代码