前端js模拟大文件下载的核心是伪造视觉反馈与进度行为：通过blob+url.createobjecturl生成假文件、setinterval模拟分块进度、service worker拦截返回流式响应，并注意内存控制、url清理及移动端兼容性。

前端用 JS 模拟大文件下载过程，核心不是真传文件，而是模拟下载的视觉反馈和进度行为——比如显示进度条、触发下载事件、控制加载状态。Mock 的关键是“骗过用户感知”，而不是复现后端传输逻辑。

用 Blob + URL.createObjectURL 模拟文件生成

即使没有真实后端，也能构造一个“看起来很大”的文件（比如 100MB 的二进制数据），再通过 Blob 触发下载：

• 用 ArrayBuffer 和 Uint8Array 快速填充假数据（如全 0 或递增字节），避免内存爆掉；
• 用 new Blob([buffer], {type: 'application/octet-stream'}) 创建 Blob 对象；
• 调用 URL.createObjectURL(blob) 得到可下载链接；
• 创建隐藏 标签，设置 href 和 download 属性，然后 .click() 触发下载。

用定时器 + 进度事件模拟下载耗时与进度

真实下载有时间、有进度，Mock 时可用 setInterval 模拟分块加载效果：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

• 设定总大小（如 104857600 字节 ≈ 100MB）和每秒“下载”量（如 2MB/s）；
• 用计时器每 100ms 更新一次已下载字节数，并派发自定义 progress 事件或更新 UI 进度条；
• 到达 100% 后清理定时器，再执行 Blob 创建和下载触发；
• 可配合 AbortController 实现“取消下载”交互（暂停/中止定时器 + revoke URL）。

用 Service Worker 拦截请求并返回 Mock 响应（高级 Mock）

如果项目已注册 Service Worker，可以拦截匹配 /api/download 的请求，返回伪造的流式响应：

• 在 fetch 事件中判断 URL，调用 respondWith()；
• 用 new Response(stream, { headers }) 返回 ReadableStream，内部用 TransformStream 或 ReadableStream.from() 分块推送数据；
• 浏览器会识别 Content-Length / Content-Disposition，并原生支持进度条（需服务端 header 配合，Mock 中可设固定 size）；
• 适合需要测试下载中断、断点续传 UI 的场景。

注意事项与避坑点

Mock 下载容易忽略实际限制：

• 内存友好：不要一次性 new 100MB ArrayBuffer（尤其低配设备），改用小块循环或直接用 new ArrayBuffer(1) + fill 占位；
• URL 清理：每次 createObjectURL 后，下载完成必须调用 URL.revokeObjectURL(url)，否则内存泄漏；
• 移动端兼容：iOS Safari 对 a[download] 支持有限，大文件建议用 window.open(url) 或引导用户长按保存；
• 进度精度：纯前端模拟无法反映网络波动，如需更真实，可在 fetch 前加随机 delay 或错误率（如 5% 概率 reject）。

不复杂但容易忽略细节，重点是让体验连贯、状态可信、资源可控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！