经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » 编程经验 » 查看文章
前端下载超大文件的完整方案
来源：cnblogs　　作者：甜点cc　　时间：2024/3/27 8:44:29　　对本文有异议

本文从前端方面出发实现浏览器下载大文件的功能。不考虑网络异常、关闭网页等原因造成传输中断的情况。分片下载采用串行方式（并行下载需要对切片计算hash，比对hash，丢失重传，合并chunks的时候需要按顺序合并等，很麻烦。对传输速度有追求的，并且在带宽允许的情况下可以做并行分片下载）。

测试发现存一两个G左右数据到IndexedDB后，浏览器确实会内存占用过高导致退出 (我测试使用的是chrome103版本浏览器)

实现步骤

  1. 使用分片下载： 将大文件分割成多个小块进行下载，可以降低内存占用和网络传输中断的风险。这样可以避免一次性下载整个大文件造成的性能问题。

  2. 断点续传： 实现断点续传功能，即在下载中途中断后，可以从已下载的部分继续下载，而不需要重新下载整个文件。

  3. 进度条显示： 在页面上展示下载进度，让用户清晰地看到文件下载的进度。如果一次全部下载可以从process中直接拿到参数计算得出（很精细），如果是分片下载，也是计算已下载的和总大小，只不过已下载的会成片成片的增加（不是很精细）。

  4. 取消下载和暂停下载功能： 提供取消下载和暂停下载的按钮，让用户可以根据需要中止或暂停下载过程。

  5. 合并文件： 下载完成后，将所有分片文件合并成一个完整的文件。

以下是一个基本的前端大文件下载的实现示例：

可以在类里面增加注入一个回调函数，用来更新外部的一些状态，示例中只展示下载完成后的回调

  1. class FileDownloader {
  2.   constructor({url, fileName, chunkSize = 2 * 1024 * 1024, cb}) {
  3.     this.url = url;
  4.     this.fileName = fileName;
  5.     this.chunkSize = chunkSize;
  6.     this.fileSize = 0;
  7.     this.totalChunks = 0;
  8.     this.currentChunk = 0;
  9.     this.downloadedSize = 0;
  10.     this.chunks = [];
  11.     this.abortController = new AbortController();
  12.     this.paused = false;
  13.     this.cb = cb
  14.   }
  16.   async getFileSize() {
  17.     const response = await fetch(this.url, { signal: this.abortController.signal });
  18.     const contentLength = response.headers.get("content-length");
  19.     this.fileSize = parseInt(contentLength);
  20.     this.totalChunks = Math.ceil(this.fileSize / this.chunkSize);
  21.   }
  23.   async downloadChunk(chunkIndex) {
  24.     const start = chunkIndex * this.chunkSize;
  25.     const end = Math.min(this.fileSize, (chunkIndex + 1) * this.chunkSize - 1);
  27.     const response = await fetch(this.url, {
  28.       headers: { Range: `bytes=${start}-${end}` },
  29.       signal: this.abortController.signal
  30.     });
  32.     const blob = await response.blob();
  33.     this.chunks[chunkIndex] = blob;
  34.     this.downloadedSize += blob.size;
  36.     if (!this.paused && this.currentChunk < this.totalChunks - 1) {
  37.       this.currentChunk++;
  38.       this.downloadChunk(this.currentChunk);
  39.     } else if (this.currentChunk === this.totalChunks - 1) {
  40.       this.mergeChunks();
  41.     }
  42.   }
  44.   async startDownload() {
  45.     if (this.chunks.length === 0) {
  46.       await this.getFileSize();
  47.     }
  48.     this.downloadChunk(this.currentChunk);
  49.   }
  51.   pauseDownload() {
  52.     this.paused = true;
  53.   }
  55.   resumeDownload() {
  56.     this.paused = false;
  57.     this.downloadChunk(this.currentChunk);
  58.   }
  60.   cancelDownload() {
  61.     this.abortController.abort();
  62.     this.reset();
  63.   }
  65.   async mergeChunks() {
  66.     const blob = new Blob(this.chunks, { type: "application/octet-stream" });
  67.     const url = window.URL.createObjectURL(blob);
  68.     const a = document.createElement("a");
  69.     a.href = url;
  70.     a.download = this.fileName;
  71.     document.body.appendChild(a);
  72.     a.click();
  73.     setTimeout(() => {
  74.       this.cb && this.cb({
  75.         downState: 1
  76.       })
  77.       this.reset();
  78.       document.body.removeChild(a);
  79.       window.URL.revokeObjectURL(url);
  80.     }, 0);
  81.   }
  82.   
  83.   reset() {
  84.     this.chunks = [];
  85.     this.fileName = '';
  86.     this.fileSize = 0;
  87.     this.totalChunks = 0;
  88.     this.currentChunk = 0;
  89.     this.downloadedSize = 0;
  90.   }
  91. }
  94. // 使用示例
  95. const url = "https://example.com/largefile.zip";
  96. const fileName = "largefile.zip";
  98. const downloader = new FileDownloader({url, fileName, cb: this.updateData});
  100. // 更新状态
  101. updateData(res) {
  102.   const {downState} = res
  103.   this.downState = downState
  104. }
  106. // 开始下载
  107. downloader.startDownload();
  109. // 暂停下载
  110. // downloader.pauseDownload();
  112. // 继续下载
  113. // downloader.resumeDownload();
  115. // 取消下载
  116. // downloader.cancelDownload();

分片下载怎么实现断点续传？已下载的文件怎么存储？

浏览器的安全策略禁止网页（JS）直接访问和操作用户计算机上的文件系统。

在分片下载过程中，每个下载的文件块（chunk）都需要在客户端进行缓存或存储，方便实现断点续传功能，同时也方便后续将这些文件块合并成完整的文件。这些文件块可以暂时保存在内存中或者存储在客户端的本地存储（如 IndexedDB、LocalStorage 等）中。

一般情况下，为了避免占用过多的内存，推荐将文件块暂时保存在客户端的本地存储中。这样可以确保在下载大文件时不会因为内存占用过多而导致性能问题。

在上面提供的示例代码中，文件块是暂时保存在一个数组中的，最终在mergeChunks()方法中将这些文件块合并成完整的文件。如果你希望将文件块保存在本地存储中，可以根据需要修改代码，将文件块保存到 IndexedDB 或 LocalStorage 中。

IndexedDB本地存储

IndexedDB文档：IndexedDB_API

IndexedDB 浏览器存储限制和清理标准

无痕模式是浏览器提供的一种隐私保护功能，它会在用户关闭浏览器窗口后自动清除所有的浏览数据，包括 LocalStorage、IndexedDB 和其他存储机制中的数据。

IndexedDB 数据实际上存储在浏览器的文件系统中，是浏览器的隐私目录之一，不同浏览器可能会有不同的存储位置，普通用户无法直接访问和手动删除这些文件，因为它们受到浏览器的安全限制。可以使用 deleteDatabase 方法来删除整个数据库，或者使用 deleteObjectStore 方法来删除特定的对象存储空间中的数据。

原生的indexedDB api 使用起来很麻烦，稍不留神就会出现各种问题，封装一下方便以后使用。

这个类封装了 IndexedDB 的常用操作，包括打开数据库、添加数据、通过 ID 获取数据、获取全部数据、更新数据、删除数据和删除数据表。

封装indexedDB类

  1. class IndexedDBWrapper {
  2.   constructor(dbName, storeName) {
  3.     this.dbName = dbName;
  4.     this.storeName = storeName;
  5.     this.db = null;
  6.   }
  8.   openDatabase() {
  9.     return new Promise((resolve, reject) => {
  10.       const request = indexedDB.open(this.dbName);
  11.       
  12.       request.onerror = () => {
  13.         console.error("Failed to open database");
  14.         reject();
  15.       };
  17.       request.onsuccess = () => {
  18.         this.db = request.result;
  19.         resolve();
  20.       };
  22.       request.onupgradeneeded = () => {
  23.         this.db = request.result;
  24.         
  25.         if (!this.db.objectStoreNames.contains(this.storeName)) {
  26.           this.db.createObjectStore(this.storeName, { keyPath: "id" });
  27.         }
  28.       };
  29.     });
  30.   }
  32.   addData(data) {
  33.     return new Promise((resolve, reject) => {
  34.       const transaction = this.db.transaction([this.storeName], "readwrite");
  35.       const objectStore = transaction.objectStore(this.storeName);
  36.       const request = objectStore.add(data);
  38.       request.onsuccess = () => {
  39.         resolve();
  40.       };
  42.       request.onerror = () => {
  43.         console.error("Failed to add data");
  44.         reject();
  45.       };
  46.     });
  47.   }
  49.   getDataById(id) {
  50.     return new Promise((resolve, reject) => {
  51.       const transaction = this.db.transaction([this.storeName], "readonly");
  52.       const objectStore = transaction.objectStore(this.storeName);
  53.       const request = objectStore.get(id);
  55.       request.onsuccess = () => {
  56.         resolve(request.result);
  57.       };
  59.       request.onerror = () => {
  60.         console.error(`Failed to get data with id: ${id}`);
  61.         reject();
  62.       };
  63.     });
  64.   }
  66.   getAllData() {
  67.     return new Promise((resolve, reject) => {
  68.       const transaction = this.db.transaction([this.storeName], "readonly");
  69.       const objectStore = transaction.objectStore(this.storeName);
  70.       const request = objectStore.getAll();
  72.       request.onsuccess = () => {
  73.         resolve(request.result);
  74.       };
  76.       request.onerror = () => {
  77.         console.error("Failed to get all data");
  78.         reject();
  79.       };
  80.     });
  81.   }
  83.   updateData(data) {
  84.     return new Promise((resolve, reject) => {
  85.       const transaction = this.db.transaction([this.storeName], "readwrite");
  86.       const objectStore = transaction.objectStore(this.storeName);
  87.       const request = objectStore.put(data);
  89.       request.onsuccess = () => {
  90.         resolve();
  91.       };
  93.       request.onerror = () => {
  94.         console.error("Failed to update data");
  95.         reject();
  96.       };
  97.     });
  98.   }
  100.   deleteDataById(id) {
  101.     return new Promise((resolve, reject) => {
  102.       const transaction = this.db.transaction([this.storeName], "readwrite");
  103.       const objectStore = transaction.objectStore(this.storeName);
  104.       const request = objectStore.delete(id);
  106.       request.onsuccess = () => {
  107.         resolve();
  108.       };
  110.       request.onerror = () => {
  111.         console.error(`Failed to delete data with id: ${id}`);
  112.         reject();
  113.       };
  114.     });
  115.   }
  117.   deleteStore() {
  118.     return new Promise((resolve, reject) => {
  119.       const version = this.db.version + 1;
  120.       this.db.close();
  122.       const request = indexedDB.open(this.dbName, version);
  124.       request.onupgradeneeded = () => {
  125.         this.db = request.result;
  126.         this.db.deleteObjectStore(this.storeName);
  127.         resolve();
  128.       };
  130.       request.onsuccess = () => {
  131.         resolve();
  132.       };
  134.       request.onerror = () => {
  135.         console.error("Failed to delete object store");
  136.         reject();
  137.       };
  138.     });
  139.   }
  140. }

使用indexedDB类示例：

  1. const dbName = "myDatabase";
  2. const storeName = "myStore";
  4. const dbWrapper = new IndexedDBWrapper(dbName, storeName);
  6. dbWrapper.openDatabase().then(() => {
  7.   const data = { id: 1, name: "John Doe", age: 30 };
  9.   dbWrapper.addData(data).then(() => {
  10.     console.log("Data added successfully");
  12.     dbWrapper.getDataById(1).then((result) => {
  13.       console.log("Data retrieved:", result);
  15.       const updatedData = { id: 1, name: "Jane Smith", age: 35 };
  16.       dbWrapper.updateData(updatedData).then(() => {
  17.         console.log("Data updated successfully");
  19.         dbWrapper.getDataById(1).then((updatedResult) => {
  20.           console.log("Updated data retrieved:", updatedResult);
  22.           dbWrapper.deleteDataById(1).then(() => {
  23.             console.log("Data deleted successfully");
  25.             dbWrapper.getAllData().then((allData) => {
  26.               console.log("All data:", allData);
  28.               dbWrapper.deleteStore().then(() => {
  29.                 console.log("Object store deleted successfully");
  30.               });
  31.             });
  32.           });
  33.         });
  34.       });
  35.     });
  36.   });
  37. });

indexedDB的使用库 - localforage

这个库对浏览器本地存储的几种方式做了封装，自动降级处理。但是使用indexedDB上感觉不是很好，不可以添加索引，但是操作确实方便了很多。

文档地址： localforage

下面展示 LocalForage 中使用 IndexedDB 存储引擎并结合 async/await 进行异步操作

  1. const localforage = require('localforage');
  3. // 配置 LocalForage
  4. localforage.config({
  5.   driver: localforage.INDEXEDDB, // 使用 IndexedDB 存储引擎
  6.   name: 'myApp', // 数据库名称
  7.   version: 1.0, // 数据库版本
  8.   storeName: 'myData' // 存储表名称
  9. });
  11. // 使用 async/await 进行异步操作
  12. (async () => {
  13.   try {
  14.     // 存储数据
  15.     await localforage.setItem('key', 'value');
  16.     console.log('数据保存成功');
  18.     // 获取数据
  19.     const value = await localforage.getItem('key');
  20.     console.log('获取到的数据为:', value);
  22.     // 移除数据
  23.     await localforage.removeItem('key');
  24.     console.log('数据移除成功');
  25.     
  26.     // 关闭 IndexedDB 连接
  27.     await localforage.close();
  28.     console.log('IndexedDB 已关闭');
  29.   } catch (err) {
  30.     console.error('操作失败', err);
  31.   }
  32. })();

现代的浏览器会自动管理 IndexedDB 连接的生命周期，包括在页面关闭时自动关闭连接，在大多数情况下，不需要显式地打开或关闭 IndexedDB 连接。

如果你有特殊的需求或者对性能有更高的要求，可以使用 localforage.close() 方法来关闭连接。

使用 LocalForage 来删除 IndexedDB 中的所有数据

  1. import localforage from 'localforage';
  3. // 使用 clear() 方法删除所有数据
  4. localforage.clear()
  5.   .then(() => {
  6.     console.log('IndexedDB 中的所有数据已删除');
  7.   })
  8.   .catch((error) => {
  9.     console.error('删除 IndexedDB 数据时出错：', error);
  10.   });

IndexedDB内存暂用过高问题

使用 IndexedDB 可能会导致浏览器内存占用增加的原因有很多，以下是一些可能的原因：

  1. 数据量过大：如果你在 IndexedDB 中存储了大量数据，那么浏览器可能需要消耗更多内存来管理和处理这些数据。尤其是在读取或写入大量数据时，内存占用会显著增加。

  2. 未关闭的连接：如果在使用完 IndexedDB 后未正确关闭数据库连接，可能会导致内存泄漏。确保在不再需要使用 IndexedDB 时正确关闭数据库连接，以释放占用的内存。

  3. 索引和查询：如果你在 IndexedDB 中创建了大量索引或者执行复杂的查询操作，都会导致浏览器内存占用增加，特别是在处理大型数据集时。

  4. 缓存：浏览器可能会对 IndexedDB 中的数据进行缓存，以提高访问速度。这可能会导致内存占用增加，尤其是在大规模数据操作后。

  5. 浏览器实现：不同浏览器的 IndexedDB 实现可能存在差异，某些浏览器可能会在处理 IndexedDB 数据时占用更多内存。

为了减少内存占用，你可以考虑优化数据存储结构、合理使用索引、避免长时间保持大型数据集等措施。另外，使用浏览器的开发者工具进行内存分析，可以帮助你找到内存占用增加的具体原因，从而采取相应的优化措施。

我是 甜点cc，个人网站: blog.i-xiao.space/

唯有行动，才能战胜虚无！

公众号：【看见另一种可能】

原文链接：https://www.cnblogs.com/all-smile/p/18096224

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

编程经验热门文章

  • Prometheus监控之SNMP Exporter介绍和数据展现
  • Intel 82599网卡异常挂死原因
  • 腾讯防水墙的分析识别与破解
  • 桌面应用自动化WinAppDriver入门
  • 文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览
  • 「教程」如何下载AcFun网站上的视频、A站视频下载工具
  • 基于Hi3559AV100的SVP(NNIE)开发整体流程
  • GBDT(梯度提升树)scikit-klearn中的参数说明及简汇
  • antd之RangePicker设置默认值方式
  • 决胜经典算法之插入排序

    • 编程经验推荐文章

  • wifi基础(一)：无线电波与WIFI信号干扰、衰减
  • 甲方扔给两个存在包名与类名均相同的Jar包，要在工程中同时使用怎么办？
  • 《花100块做个摸鱼小网站! 》第三篇—热搜表结构设计和热搜数据存储
  • Fluent Editor：一个基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
  • 方法的三种调用形式
  • 《花100块做个摸鱼小网站! 》第二篇—后端应用搭建和完成第一个爬虫
  • 《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(4)-再识Wireshark - 北京-宏哥
  • 《软件性能测试分析与调优实践之路》(第2版) 读书笔记（二）总体介绍（下）-真正从性能分析与调优来看性能测试
  • 架构知识点（三）
  • 《花100块做个摸鱼小网站! 》第一篇—买云服务器和初始化环境

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号