前端大文件下载（带进度条）

1.需求背景
2.需求分析：
3.实现方式
4.实现方式解析
- 1.递归调用接口获取数据流（base64/blob）,我这里后端接口返回的是base64;
- 2.后端对文件进行切片处理，接口返回流数据和总切片数以及当前的切片索引，前端进行进度计算，和流数据整合；
- 3.注意，不能对接收的base64数据流直接字符串拼接，否则会报错(Invalid string length)，字符串长度超过了 JS 引擎的限制，那么这个长度限制到底是多少呢？根据搜索到的结果，V8 引擎支持的字符串长度为 2 的 29 次方，换算成内存量约为 512 MB；
- 4.解决办法，以数组的方式，进行保存
- 5.循环数组，把每一个切片base64数据转成Blob格式
- 6.调用file-saver的saveAs的api实现下载
5.可优化点
- 增加暂停/继续、取消按钮对进度条进行控制，实现断点续传；

1.需求背景

前端页面实现大文件（G级别以上）下载，压缩文件格式（tar包）, 显示下载进度

2.需求分析：

如果页面上实现一个点击下载的功能，传统做法：
1.是使用一个 a 标签，然后将该标签的 href 属性地址指向下载文件在服务端的地址，增加download属性（同域）；
2. location.href直接赋值（如果该文件能在浏览器上打开，那么就直接打开）
以上两种方法不做过多介绍，本文章主要是通过对文件进行切片传输，以流的形式返回给前端，前端进行整合实现下载

3.实现方式

import {saveAs} from ‘file-saver’;

 点击下载的函数（递归实现）async downloadLog(val: Row) {const requestHandle = async () => {const params = {date,number: val.packageNum  // 当前的切片索引};let {context, flag, total} = await this.fetchLogDownloadAction(params);val.dataStream.push(`${context}`); // 文件内容（base64）val.progress = ((++val.packageNum / total) * 100).toFixed(0); // 进度的百分比展示if (flag === 1) {// 最后一包val.packageNum = 0;this.saveFileDownload(val);} else if (flag === 0) {this.$nextTick(() => {requestHandle();});}};requestHandle();}

 流文件保存本地并下载async saveFileDownload(val: Row) {let arrBlob: any[] = [];val.dataStream.forEach((ele: string) => {var bstr = atob(ele),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}arrBlob.push(u8arr);});let saveFile = new Blob(arrBlob, {type: 'application/x-tar'});saveAs(saveFile, val.date);val.dataStream = [];}

4.实现方式解析

1.递归调用接口获取数据流（base64/blob）,我这里后端接口返回的是base64;

2.后端对文件进行切片处理，接口返回流数据和总切片数以及当前的切片索引，前端进行进度计算，和流数据整合；

3.注意，不能对接收的base64数据流直接字符串拼接，否则会报错(Invalid string length)，字符串长度超过了 JS 引擎的限制，那么这个长度限制到底是多少呢？根据搜索到的结果，V8 引擎支持的字符串长度为 2 的 29 次方，换算成内存量约为 512 MB；

4.解决办法，以数组的方式，进行保存

5.循环数组，把每一个切片base64数据转成Blob格式

6.调用file-saver的saveAs的api实现下载

5.可优化点

增加暂停/继续、取消按钮对进度条进行控制，实现断点续传；

前端大文件下载（带进度条）相关推荐

python 全栈开发，Day36(作业讲解(大文件下载以及进度条展示),socket的更多方法介绍,验证客户端链接的合法性hmac,socketserver)...
先来回顾一下昨天的内容黏包现象粘包现象的成因 : tcp协议的特点面向流的为了保证可靠传输所以有很多优化的机制无边界所有在连接建立的基础上传递的数据之间没有界限收发消息很有可能不完全 ...
036_python的大文件下载以及进度条展示
复习 1.黏包现象粘包现象的成因: tcp协议的特点,面向流的,为了保证可靠传输,所以有很多优化的机制. 无边界所有在连接建立的基础上传递的数据之间没有界限. 收发消息很有可能不完全相等. 缓存机 ...
php - 基于 webuploader 视频大文件分片分段上传，支持断点续传（刷新、关闭页面、重新上传、网络中断等情况）带进度条，前端后端都有示例源码详细教程
效果图文件上传前先检测该文件是否已上传,如果已上传提示 "文件已存在",如果未上传则直接上传. 基于 php+webuploader的大文件分片上传,带进度条,支持断点续传(刷新 ...
php带截切图片上传_PHP大文件切割上传并带进度条功能示例
本文实例讲述了PHP大文件切割上传并带进度条功能.分享给大家供大家参考,具体如下: 前面一篇介绍了PHP大文件切割上传功能,这里再来进一步讲解PHP大文件切割上传并带进度条功能. 项目结构图: 14- ...
带进度条的ASP无组件断点续传下载代码
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <%Option Explicit%> <% '= ...
ASP无组件上传带进度条
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <%Option Explicit%> <% '= ...
【MFC】带进度条的状态栏
00. 目录文章目录 00. 目录 01. 案例概述 02. 开发环境 03. 关键技术 04. 程序设计 05. 秘笈心法 06. 源码下载 07. 附录 01. 案例概述状态栏多用于显示程序执 ...
php 异步进度条,PHP学习：PHP+Ajax异步带进度条上传文件实例
<PHP学习:PHP+Ajax异步带进度条上传文件实例>要点: 本文介绍了PHP学习:PHP+Ajax异步带进度条上传文件实例,希望对您有用.如果有疑问,可以联系我们. PHP应用前端引入 ...
从FTP下载文件带进度条
1 #region 获取FTP服务器上指定文件的大小 2 /// <summary> 3 /// 获取FTP服务器上指定文件的大小 4 /// </summary> 5 /// ...
java mvc上传文件进度_java相关：springMVC+ajax实现文件上传且带进度条实例
java相关:springMVC+ajax实现文件上传且带进度条实例发布于 2020-7-5| 复制链接本篇文章主要介绍了springMVC+ajax实现文件上传且带进度条实例,具有一定的参考价值 ...

前端大文件下载（带进度条）

前端大文件下载（带进度条）

1.需求背景

2.需求分析：

3.实现方式

4.实现方式解析

1.递归调用接口获取数据流（base64/blob）,我这里后端接口返回的是base64;

2.后端对文件进行切片处理，接口返回流数据和总切片数以及当前的切片索引，前端进行进度计算，和流数据整合；

4.解决办法，以数组的方式，进行保存

5.循环数组，把每一个切片base64数据转成Blob格式

6.调用file-saver的saveAs的api实现下载

5.可优化点

增加暂停/继续、取消按钮对进度条进行控制，实现断点续传；

前端大文件下载（带进度条）相关推荐

最新文章

热门文章