Angular 集成 StreamSaver 大文件下载

应用场景:

实现目标: 在网页端实现大文件(文件大小 >= 2 G) 断点续传

实际方案: 发送多次请求, 每次请求一部分文件数据, 然后通过续写将文件数据全部写入.

难点: 无法实现文件续写, 最后采用 StreamSaver 来解决这个问题.

  1. 首先从 git hub 将 StreamSaver 拉取下来.

StreamSaver gitHub 项目地址: GitHub - jimmywarting/StreamSaver.js: StreamSaver writes stream to the filesystem directly asynchronous

(这里推荐使用将 StreamSaver.js 文件直接放到项目中, 因为 StreamSaver 的实现需要借助已授信 https 服务器,

如果不配置自己的 https 服务器, 会访问 StreamSaver.js 默认已授信 https 服务器, 来实现下载功能

如果使用的是自签名的 https 服务器, 需要将证书安装在用户电脑或用户浏览器端进行一些配置才可正常使用, 稍后会讲到)

2.将 js 库导入 Angular 项目, 能在 ts 文件中调用 js 库的函数, 变量.

2.1 将 StreamSaver.js 文件放在 Angular 项目 assets\utils-js 目录下

2.2 然后在 index.html 的 head 标签中添加脚本, 如下:

复制代码
<head>
    ... 其他代码
    <script type="text/javascript" src="assets/utils-js/StreamSaver.js"></script>
</head>

2.3 随后在要使用 StreamSaver.js 的 ts 文件中声明

file-handle.ts

复制代码
declare const streamSaver: any;
export class FileHandle {
  static createWrite(fileName: string) {
    if (!fileName) throw new Error('文件名不能为空');
    // 如果没有自己已授信的 https 服务器, 下面 streamSaver.mitm = 'https://xxx_ip:xxx_port/other/mitm.html?version=2.0.0'; 可删除. 
    // 会走默认服务器: https://jimmywarting.github.io/StreamSaver.js/mitm.html?version=2.0.0
    streamSaver.mitm = 'https://xxx_ip:xxx_port/other/mitm.html?version=2.0.0';
    // 创建一个可写流
    return streamSaver.createWriteStream(fileName).getWriter();
  }
}

补充: 如果使用 npm 安装使用 streamsaver, 在配置另外授信的 https 服务器的时候, ts 会报错, 所以最好还是将 StreamSaver.js 文件直接放到项目中使用.

import * as streamSaver from 'streamsaver';

streamSaver.mitm = 'https://xxx_ip:xxx_port/other/mitm.html?version=2.0.0';

复制代码
npm i streamsaver

npm i @types/streamsaver
  1. 使用 streamSaver 完成下载
复制代码
download = () => {
    const writer = FileHandle.createWrite();
    // 伪代码
    for(let i = 0; i++; i <= 10) {
        this.http.post('/download', ...).subscribe(next => {
            writer.write(next);
        });
    }
    write.end();
}
  1. 如果下载文件不想借助 StreamSaver 默认的 https 服务器, 需要在 nginx 服务器进行如下配置

注意:

复制代码
nginx 配置的 "other" 路由应当和代码中的 streamSaver.mitm = 'https://xxx_ip:xxx_port/other/mitm.html?version=2.0.0'; 对应起来
复制代码
# https
server {
    listen  	9999ssl;
    listen  [::]:9999 ssl;
    server_name    0.0.0.0;

    ssl_certificate     /etc/nginx/my-ssl/sss.crt; # crt
    ssl_certificate_key /etc/nginx/my-ssl/sss.key; # key

    ssl_session_cache   shared:SSL:1m;
    ssl_session_timeout 5m;


	ssl_protocols TLSv1.3;
    ssl_ciphers 'HIGH:!aNULL:!MD5 or HIGH:!aNULL:!MD5:!3DES';
    ssl_prefer_server_ciphers on;

    location / {
      root   /fornt/my-app;
      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
    }

    location ^~/api {
      proxy_pass https://127.0.0.1:8888;
    }

    location ^~/other/mitm.html {
          alias   /streamsaver/mitm.html;
    }
    location ^~/other/sw.js {
      alias   /streamsaver/sw.js;
    }
    location ^~/other/ping {
      alias   /streamsaver/sw.js;
    }

}   

将 mitm.html 和 sw.js 文件放到 nginx 服务器 /streamsaver 目录下

最后重启 nginx , 就将授信 https 服务器改为了自己的服务器.

如果使用的是自签名证书, 又没有在用户电脑安装证书, 需要在浏览器添加如下配置:

--ignore-certificate-errors

相关推荐
sanx183 分钟前
专业电竞体育数据与系统解决方案
前端·数据库·apache·数据库开发·时序数据库
你的人类朋友2 小时前
【Node】认识一下Node.js 中的 VM 模块
前端·后端·node.js
Cosolar3 小时前
FunASR 前端语音识别代码解析
前端·面试·github
@大迁世界5 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙5 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump6 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD6 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
德育处主任Pro6 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin6 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马6 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端