StreamSaver实现大文件下载解决方案
StreamSaver实现大文件下载解决方案
web端
- 安装 StreamSaver.js
npm install streamsaver
# 或
yarn add streamsaver
- 在 Vue 组件中导入
import streamSaver from "streamsaver"; // 确保导入名称正确
- 完整代码修正
<!--* @projectName: * @desc: * @author: duanfanchao* @date: 2024/06/20 10:00:00
-->
<template><div class="async-table"><button @click="downloadLargeFile">下载大文件（带进度）</button><div v-if="progress > 0">下载进度: {{ progress }}%</div></div>
</template><script>
import streamSaver from "streamsaver";export default {name: "AsyncTable",components: {},data() {return {progress: 0,};},methods: {async downloadLargeFile() {try {const fileUrl = "../系统架构师资料.zip"; // 替换为你的大文件URLconst fileName = "largeFile.zip"; // 下载后的文件名// 使用 fetch 获取文件流const response = await fetch(fileUrl);if (!response.ok) throw new Error("下载失败");const contentLength = +response.headers.get("content-length");let downloadedBytes = 0;const fileStream = streamSaver.createWriteStream(fileName);const reader = response.body.getReader();const writer = fileStream.getWriter();const updateProgress = (chunk) => {downloadedBytes += chunk.length;this.progress = Math.round((downloadedBytes / contentLength) * 100);console.log('updateProgress', this.progress);};const pump = async () => {const { done, value } = await reader.read();if (done) {await writer.close();return;}updateProgress(value);await writer.write(value);return pump();};await pump();console.log("下载完成！");} catch (error) {console.error("下载出错:", error);}},},mounted() {},
};
</script><style lang="less" scoped>
.async-table {height: 100%;width: 100%;
}
</style>
注意
- StreamSaver.js 依赖 Service Worker，在 ·本地
localhost开发环境可用，但生产环境必须使用 HTTPS
node端
在 Node.js 环境下，StreamSaver.js 无法直接使用，因为它是专门为浏览器设计的库（依赖 Service Worker 和浏览器 API）。但 Node.js 本身支持流式文件处理，可以直接使用 fs 和 http/https` 模块实现大文件下载。
Node.js 实现大文件下载（替代 StreamSaver.js）
前置条件：需要安装对应的模块，如：npm i express http
推荐node版本 16.20.0
1. 使用 fs.createReadStream + res.pipe（推荐）
const express = require("express");
const fs = require("fs");
const path = require("path");const app = express();
const PORT = 3001;// 提供大文件下载
app.get("/download", (req, res) => {res.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有来源res.setHeader("Access-Control-Allow-Methods", "GET"); // 允许 GET 请求const filePath = path.join(__dirname, "./系统架构师资料.zip"); // 文件路径const fileSize = fs.statSync(filePath).size; // 获取文件大小const fileName = path.basename(filePath); // 获取文件名// RFC 5987 编码（推荐）const encodedFileName = encodeURIComponent(fileName).replace(/'/g, "%27");// 设置响应头（支持断点续传）res.setHeader("Content-Disposition",`attachment; filename*=UTF-8''${encodedFileName}`);res.setHeader("Content-Length", fileSize);res.setHeader("Content-Type", "application/octet-stream");// 创建可读流并管道传输到响应const fileStream = fs.createReadStream(filePath);fileStream.pipe(res); // 流式传输// 监听错误fileStream.on("error", (err) => {console.error("文件传输失败:", err);res.status(500).send("下载失败");});
});app.listen(PORT, () => {console.log(`服务器运行在 http://localhost:${PORT}`);
});
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- <a href="http://localhost:3001/download" download>下载大文件</a> --><input type="button" value="下载大文件" onclick="download()" /><script>function download() {fetch("http://localhost:3001/download").then((response) => response.blob()).then((blob) => {const url = URL.createObjectURL(blob);const a = document.createElement("a");a.href = url;a.download = "large-file.zip";a.click();});}</script></body>
</html>2. 使用 http 模块（原生 Node.js）
如果不想用 Express，可以用原生 http 模块：
const http = require("http");
const fs = require("fs");
const path = require("path");const server = http.createServer((req, res) => {if (req.url === "/download") {const filePath = path.join(__dirname, "large-file.zip");const fileSize = fs.statSync(filePath).size;const fileName = path.basename(filePath);res.writeHead(200, {"Content-Disposition": `attachment; filename="${fileName}"`,"Content-Length": fileSize,"Content-Type": "application/octet-stream",});const fileStream = fs.createReadStream(filePath);fileStream.pipe(res);fileStream.on("error", (err) => {console.error("下载失败:", err);res.end("下载失败");});} else {res.end("访问 /download 下载文件");}
});server.listen(3000, () => {console.log("服务器运行在 http://localhost:3000");
});
3. 大文件分块下载（支持断点续传）
Node.js 可以支持 Range 请求，实现断点续传：
const express = require("express");
const fs = require("fs");
const path = require("path");const app = express();
const PORT = 3002;app.get("/download", (req, res) => {res.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有来源res.setHeader("Access-Control-Allow-Methods", "GET"); // 允许 GET 请求const filePath = path.join(__dirname, "系统架构师资料.zip");const fileName = path.basename(filePath);// RFC 5987 编码const encodedFileName = encodeURIComponent(fileName).replace(/'/g, "%27");try {const fileSize = fs.statSync(filePath).size;// 解析 Range 请求头const range = req.headers.range;if (range) {const [start, end] = range.replace(/bytes=/, "").split("-");const chunkStart = parseInt(start, 10);const chunkEnd = end ? parseInt(end, 10) : fileSize - 1;res.writeHead(206, {"Content-Range": `bytes ${chunkStart}-${chunkEnd}/${fileSize}`,"Content-Length": chunkEnd - chunkStart + 1,"Content-Type": "application/octet-stream","Content-Disposition": `attachment; filename*=UTF-8''${encodedFileName}`});const fileStream = fs.createReadStream(filePath, { start: chunkStart, end: chunkEnd });fileStream.pipe(res);} else {res.writeHead(200, {"Content-Length": fileSize,"Content-Type": "application/octet-stream","Content-Disposition": `attachment; filename*=UTF-8''${encodedFileName}`});fs.createReadStream(filePath).pipe(res);}} catch (err) {console.error("文件错误:", err);res.status(500).send("文件下载失败");}
});app.listen(PORT, () => {console.log(`服务器运行在 http://localhost:${PORT}`);
});
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>大文件下载</title><style>.progress-container {width: 100%;background-color: #f3f3f3;margin-top: 10px;}.progress-bar {width: 0%;height: 30px;background-color: #4caf50;text-align: center;line-height: 30px;color: #000;}</style></head><body><h1>大文件下载示例</h1><button id="downloadBtn">下载文件</button><div class="progress-container"><div id="progressBar" class="progress-bar">0%</div></div><script>document.getElementById("downloadBtn").addEventListener("click", async () => {const progressBar = document.getElementById("progressBar");const url = "http://localhost:3002/download";try {const response = await fetch(url);if (!response.ok) throw new Error("下载失败");const contentLength = +response.headers.get("Content-Length");let receivedLength = 0;const reader = response.body.getReader();const chunks = [];while (true) {const { done, value } = await reader.read();if (done) break;chunks.push(value);receivedLength += value.length;// 更新进度条const percent = Math.round((receivedLength / contentLength) * 100);progressBar.style.width = percent + "%";progressBar.textContent = percent + "%";}// 合并所有chunksconst blob = new Blob(chunks);const downloadUrl = URL.createObjectURL(blob);// 创建下载链接const a = document.createElement("a");a.href = downloadUrl;a.download = "系统架构师资料.zip";document.body.appendChild(a);a.click();// 清理setTimeout(() => {document.body.removeChild(a);URL.revokeObjectURL(downloadUrl);}, 100);} catch (error) {console.error("下载错误:", error);progressBar.style.backgroundColor = "red";progressBar.textContent = "下载失败";}});</script></body>
</html>方案3的效果图
相关文章：
StreamSaver实现大文件下载解决方案
StreamSaver实现大文件下载解决方案 web端 安装 StreamSaver.js npm install streamsaver # 或 yarn add streamsaver在 Vue 组件中导入 import streamSaver from "streamsaver"; // 确保导入名称正确完整代码修正 <!--* projectName: * desc: * author: dua…...
【Vue 3全栈实战】从响应式原理到企业级架构设计
目录 🌟 前言🏗️ 技术背景与价值🩹 当前技术痛点🛠️ 解决方案概述👥 目标读者说明 🧠 一、技术原理剖析📊 核心概念图解💡 核心作用讲解🔧 关键技术模块说明⚖️ 技术选…...
Java线程池调优与实践经验
在Java面试中，线程池调优是一个常见且重要的考察点，尤其是当涉及Spring生态时，ThreadPoolTaskExecutor的使用经验通常会被深入追问。以下是针对该问题的结构化回答，结合原理、实践和调优经验： 1. 线程池调优的核心参数…...
【科研项目】大三保研人科研经历提升
大三保研人，五月科研项目经历提升 现在已经是五月下旬，各大高校的夏令营通知陆续发布，九月的预推免也近在眼前。我知道很多大三的同学正在焦虑——绩点已经定型，竞赛经历又不够丰富，简历上能写的东西太少，面…...
期刊采编系统安装升级错误
我们以ojs系统为例： PHP Fatal error: Uncaught Error: Call to a member function getId() on null in /esci/data/html/classes/install/Upgrade.inc.php:1019 Stacktrace: #0 /esci/data/html/lib/pkp/classes/install/Installer.inc.php(415): Upgrade->con…...
CSS【详解】弹性布局 flex
适用场景 一维（行或列）布局 基本概念 包裹所有被布局元素的父元素为容器 所有被布局的元素为项目 项目的排列方向（垂直/水平）为主轴 与主轴垂直的方向交交叉轴 容器上启用 flex 布局 将容器的 display 样式设置为 flex 或 i…...
自回归图像编辑 EditAR: Unified Conditional Generation with Autoregressive Models
Paperhttps://arxiv.org/pdf/2501.04699 Code (coming soon) 目录 方法 实验 EditAR是一个统一的自回归框架，用于各种条件图像生成任务——图像编辑、深度到图像、边缘到图像、分割到图像。 next-token预测的功效尚未被证明用于图像编辑。 EditAR主要构建在Ll…...
React Flow 中 Minimap 与 Controls 组件使用指南：交互式小地图与视口控制定制（含代码示例）
本文为《React Agent：从零开始构建 AI 智能体》专栏系列文章。 专栏地址：https://blog.csdn.net/suiyingy/category_12933485.html。项目地址：https://gitee.com/fgai/react-agent（含完整代码示例与实战源）。完整介绍…...
基于YOLOv8 的分类道路目标系统-PyTorch实现
本文源码： https://download.csdn.net/download/shangjg03/90873939 1. 引言 在智能交通和自动驾驶领域，道路目标分类是一项关键技术。通过对摄像头捕获的图像或视频中的目标进行分类识别，可以帮助车辆或系统理解周围环境，做出更安全的决策。本教程将介绍如何使用 PyTorch …...
STM32之串口通信WIFI上云
一、W模块的原理与应用 基本概念 如果打算让硬件设备可以通过云服务器进行通信（数据上报/指令下发），像主流的云服务器有阿里云、腾讯云、华为云，以及其他物联网云平台：巴法云.......，硬件设备需要通过TCP…...
PCB智能报价系统——————仙盟创梦IDE
软件署名 代码贡献： 紫金电子科技有限公司 文案正路：cybersnow 正文 对企业的竞争力有着深远影响。传统的 PCB 报价方式往往依赖人工核算，不仅耗时较长，还容易出现误差。随着科技的发展，PCB 自动报价系统应运而生&a…...
EXO分布式部署deepseek r1
EXO 是一个支持分布式 AI 计算的框架，可以用于在多个设备（包括 Mac Studio）上运行大语言模型（LLM）。以下是联调 Mac Studio 512GB 的步骤： 安装 EXO • 从 EXO GitHub 仓库 下载源码或使用 git clone 获取…...
)）详细讲解版)
每日算法 -【Swift 算法】寻找两个有序数组的中位数（O(log(m+n))）详细讲解版
🧠 用 Swift 寻找两个有序数组的中位数（O(log(mn))）详细讲解版 寻找两个有序数组的中位数，是 LeetCode 上非常经典的一道题，难度为 困难（Hard），但它的本质是一个 二分查找 的变形应…...
Linux问题排查-找到偷偷写文件的进程
在 Linux 系统中，若要通过已修改的文件找到修改该文件的进程 PID，可以结合以下方法分析，具体取决于文件是否仍被进程打开或已被删除但句柄仍存在： 一、文件仍被进程打开（未删除） 如果文件当前正在被某个进…...
SOPHGO算能科技BM1688内存使用与编解码开发指南
1. BM1688内存分配接口详解 1.1 设备内存分配接口区别 BM1688提供了三个主要的设备内存分配接口，它们的主要区别如下： // 基本设备内存分配接口 void* bm_malloc_device_byte(bm_handle_t handle, unsigned int size);// 指定heap区域的设备内存分配 void*</...
kotlin flow的两种SharingStarted策略的区别
一 两种 SharingStarted 策略的区别： SharingStarted.Eagerly: 立即开始收集上游流，即使没有下游订阅者持续保持活跃状态，直到 ViewModel 被清除优点：响应更快，数据始终保持最新缺点：消耗更多资源&#x…...
LeetCode-链表-合并两个有序链表
LeetCode-链表-合并两个有序链表 ✏️ 关于专栏：专栏用于记录 prepare for the coding test。 文章目录 LeetCode-链表-合并两个有序链表📝 合并两个有序链表🎯题目描述🔍 输入输出示例🧩题目提示🧪AC递归&…...
sqli-labs靶场29-31关（http参数污染）
目录 前言 less29（单引号http参数污染） less30（双引号http参数污染） less31(双引号括号http参数污染) 前言 在JSP中，使用request.getParameter("id")获取请求参数时，如果存在多个同名参数&a…...
独占内存访问指令LDXR/STXR
一、原子操作的介绍 在计算机领域里，如果要在多线程的情况下要保持数据的同步，需要引入称作Load-Link（LL）和Store-Conditional（SC）的操作，通常简称为LL/SC。 LL操作返回一个内存地址上当前存储…...
JVM 垃圾回收机制深度解析（含图解）
JVM 垃圾回收机制深度解析（含图解） 一、垃圾回收整体流程 垃圾回收图解 #mermaid-svg-KPtxlwWntQx8TOj3 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-KPtxlwWntQx8TOj3 .error-icon{fill…...
如何利用 Conda 安装 Pytorch 教程 ？
如何利用 Conda 安装 Pytorch 教程 ？ 总共分为六步走： （1）第一步：验证conda 环境是否安装好？ 1) conda -V2) conda --version（2）第二步：查看现有环境 conda env list…...
【ffmpeg】SPS与PPS的概念
PPS（Picture Parameter Set）详解 PPS（图像参数集）是H.264/H.265视频编码标准中的关键数据结构，与SPS（序列参数集）共同组成视频的解码配置信息，直接影响视频的正确解码和播放。以下是…...
uniapp vue 开发微信小程序 分包梳理经验总结
嗨，我是小路。今天主要和大家分享的主题是“uniapp vue 开发微信小程序 分包梳理经验总结”。 在使用 UniAppvue框架开发微信小程序时，当项目比较大的时候，经常需要分包加载。它有助于控制主包的大小，从而提升小程序的启…...
什么是VR展示？VR展示的用途
随着科技的迅猛发展，我们步入一个全新的数字时代。在这个时代，虚拟现实（VR）技术崭露头角，逐步改变我们对世界的认知。全景展示厅作为VR技术与传统展览艺术的完美结合，以独特的全景视角，引领我们…...
.NET外挂系列：4. harmony 中补丁参数的有趣玩法（上）
一：背景 1. 讲故事 前面几篇我们说完了 harmony 的几个注入点，这篇我们聚焦注入点可接收的几类参数的解读，非常有意思，在.NET高级调试 视角下也是非常重要的，到底是哪些参数，用一张表格整理如下ÿ…...
Go语言中new与make的深度解析
在 Go 语言中，new 和 make 是两个用于内存分配的内置函数，但它们的作用和使用场景有显著区别。 理解它们的核心在于： new(T): 为类型 T 分配内存，并将其初始化为零值，然后返回一个指向该内存的指针 (*T)。make(T, ar…...
3、ubantu系统 | 通过vscode远程安装并配置anaconda
1、vscode登录 登录后通过pwd可以发现目前位于wangqinag账号下，左侧为属于该账号的文件夹及文件。 通过cd ..可以回到上一级目录，通过ls可以查看当前目录下的文件夹及文件。 2、安装 2.1、下载anaconda 通过wget和curl下载未成功，使用手动…...
【Unity】 HTFramework框架（六十五）ScrollList滚动数据列表
更新日期：2025年5月16日。 Github 仓库：https://github.com/SaiTingHu/HTFramework Gitee 仓库：https://gitee.com/SaiTingHu/HTFramework 索引 一、ScrollList滚动数据列表二、使用ScrollList1.快捷创建ScrollList2.ScrollList的属性3.自定义…...
深度学习之用CelebA_Spoof数据集搭建一个活体检测-用MNN来推理时候如何利用Conan对软件包进行管理
我为什么用Conan 前面的文章：深度学习之用CelebA_Spoof数据集搭建一个活体检测-训练好的模型用MNN来推理有提到怎么使用MNN对训练好的模型进行推理，里面并没有提到我是怎么编译和进行代码依赖包的管理的详细步骤，在这里我是用的是Conan:一个C/C++包管理器，可以管理项目依赖…...
React 常见的陷阱之（如异步访问事件对象）
文章目录 前言1. 异步访问事件对象问题解决方案 2. 事件传播的误解**问题**解决方案 **3. 事件监听器未正确卸载****问题****解决方案** **4. 动态列表中的事件绑定****问题****解决方案** **5. 第三方库与 React 事件冲突****问题****解决方案** **6. 表单输入与受控组件****问…...