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

相关推荐
刘大浪1 分钟前
vue.js滑动到顶便锁定位置
前端·javascript·vue.js
小金刚®7 分钟前
构建简洁之美:我的第一个前端页面
前端
ordinary9044 分钟前
指令-v-for的key
前端·javascript·vue.js
rpa_top1 小时前
RPA 助力电商:自动化商品信息上传,节省人力资源 —— 以影刀 RPA 为例【rpa.top】
大数据·前端·人工智能·自动化·rpa
新时代农民工--小明1 小时前
前端自动化部署更新,自动化打包部署
运维·前端·自动化
前端Hardy1 小时前
HTML&CSS:酷炫的3D开关控件
前端·javascript·css·3d·html
小马超会养兔子1 小时前
如何写一个数字老虎机滚轮
开发语言·前端·javascript·vue
m0_672449601 小时前
前端(组件传参案例)
前端
devotemyself1 小时前
vue的ElMessage的css样式不生效
前端·css·vue.js
Mr。轩。2 小时前
Vue 单表 CRUD模板 前端
前端·javascript·vue.js