大文件下载方案设计

项目地址 https://github.com/yiiiiiiiiiiiiiiiiii/big-file

背景

支持交易记录导出 excel 功能，当筛选的交易数据量过大，进行下载时，等待时间过长，影响用户体验，有时还会超出服务器响应时间导致无法下载。

需求分析以及方案设计

• 会出现网络不稳定，并导致下载失败的问题

  1. 对于网络不稳定的问题，可以采用将文件进行分片的形式，阶段性的获得下载成果，减少网络中断整体失败的风险。
  2. 需要服务端接口支持 Content-Range 响应头，以便客户端进行分片下载。
  3. 由于分片都是通过 Blob 放在内存中，如果出现其他极端情况，下载仍然会整体失败，所以需要通过 indexDB 进行缓存下载内容，以便进行断点续传。

• 文件较大，下载等待时间过长

  1. 对于文件较大，下载等待时间过长的问题，可以采用并行下载分片的方式，缩短下载等待时间。

• 用户体验不好

  1. 对于用户体验不好的问题，客户端需要显示进度条，以便用户了解下载进度。
  2. 提供重命名的功能

总结

大文件下载方案设计，主要是为了解决大文件下载过程中，用户等待时间过长，影响用户体验的问题。通过采用分片，断点续传，可以大幅度提升下载效率。

项目

安装依赖：

npm install

启动项目：

npm run start:s

npm run start:c

demo 地址：http://localhost:3000

项目目录结构：

├── client
│   ├── index.js
├── server
│   ├── app.js
├── public
│   ├── index.html
│   ├── static
├── xlsx
│   ├── chengdu_weather.xlsx
├── package.json
├── package-lock.json
├── README.md

• client 目录：前端
• server 目录：后端
• public 目录：静态资源目录
• xlsx 目录：测试文件目录
• README.md：项目说明文档

需求执行情况

已经执行

1. 前端实现文件分片下载功能，并显示进度条
2. 前端实现并发下载，提高下载速度
3. 提供文件下载命名功能, 在 FileDownloader filename 相关逻辑中
4. 后端实现分片下载功能

待执行

1. 使用 indexDB 保存结果实现断点续传