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
3. 使用 streamSaver 完成下载
download = () => {
const writer = FileHandle.createWrite();
// 伪代码
for(let i = 0; i++; i <= 10) {
this.http.post('/download', ...).subscribe(next => {
writer.write(next);
});
}
write.end();
}
4. 如果下载文件不想借助 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;
} }
最后重启 nginx , 就将授信 https 服务器改为了自己的服务器.
如果使用的是自签名证书, 又没有在用户电脑安装证书, 需要在浏览器添加如下配置:
--ignore-certificate-errors
Angular 集成 StreamSaver的更多相关文章
- Angular集成UEditor
1.Ueditor的集成主要通过把UEditor做成一个Component来实现,先上Component代码: import { AfterContentInit, Component, Input, ...
- angular集成tinymce
1.前言 我使用的是angular的7.x版本,和之前的低版本集成方式有所区别.这里记录下基本的集成步骤. 2.集成步骤 2.1安装tinymac包 npm install tinymce --sav ...
- Angular集成admin-lte框架
其实上一篇里面提到的集成datatables.net就是admin-lte里面的一个子插件,不过这个子插件,他是自带types定义文件的,admin-lte这个东西在DefinitelyTyped里面 ...
- PrimeNG01 angular集成PrimeNG
1 开发环境 本博文基于angular5 2 步骤 2.1 创建angular5项目 详情参见百度 2.2 下载PrimeNG依赖 npm install primeng --save npm ins ...
- angular 与 layer 集成过程
layer 的提示框和弹层确实也好用,在使用angular的前提下,使用layer遇到诸多麻烦,记录下来. 在类型是1页面层,主要问题在遮罩方面,造成无法编辑. 开始:引入layer 样式,angul ...
- Angular + Leaflet 实现房源数据可视化(附github源码)
这是什么?租房信息展示平台 宏观的租房数据可视化微观的房源信息展示多条件搜索等等 链接地图搜租房 来龙去脉 受 @李国宝 的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息系统方面的 ...
- AngularJS集成富文本编辑器
最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: ...
- ABP框架 - 动态Web Api层
文档目录 本节内容: 创建动态Web Api控制器 ForAll 方法 重写 ForAll ForMethods Http 动词 WithVerb 方法 HTTP 特性 命名约定 Api 浏览器 Re ...
- ABP官方文档翻译 6.7 CSRF/XSRF保护
CSRF/XSRF保护 介绍 HTTP动词 非浏览器客户端 ASP.NET MVC 特征 集成 布局视图 配置 ASP.NET Web API 特征 集成 集成到ASP.NET MVC客户端 集成到其 ...
- iot前台开发环境：搭建 SpringBoot+angularJs2
参考网站 Angular 中文官网:https://angular.cn/ 参考代码:https://ng.ant.design/#/components/dropdown npm install ...
随机推荐
- 看见云上新力量｜专访快准车服CIO牛小虎：全面信息化支持，让车爱上快准
简介: 从"数字化汽配基础设施的创造者"到"让车爱上快准",快准车服的探索与前行执著而坚定!基于数字化能力,面向3万亿的未来市场,我们拭目以待!--快准车服CI ...
- SAE助力「海底小纵队学英语」全面拥抱Serverless，节省25%以上成本
简介: 阿里云Serveless应用引擎SAE 具备免运维IaaS.按需使用.按量计费.低门槛服务应用上云,并且支持多种语言和高弹性能力等特点,刚好完美解决了客户长期以来运维复杂.资源利用率不高.开发 ...
- 混合云K8s容器化应用弹性伸缩实战
简介: 混合云K8s容器化应用弹性伸缩实战 1. 前提条件 本最佳实践的软件环境要求如下:应用环境:①容器服务ACK基于专有云V3.10.0版本.②公共云云企业网服务CEN.③公共云弹性伸缩组服务ES ...
- 代码安全无忧—云效Codeup代码加密技术发展之路
简介: 从代码服务及代码安全角度出发,看看云效代码加密技术如何解决这一问题 代码数据存在云端,如何保障它的安全? 部分企业管理者对于云端代码托管存在一丝担心:我的代码存在云端服务器,会不会被泄露? 接 ...
- dotnet 使用 windbg 运行脚本方式自动批量调试处理 dump 文件
本文将和大家介绍一个简单且实际用途不大的使用 windbg 配合脚本的方式,进行自动化的大批量对 dotnet 系应用的 dump 进行自动化分析调试处理,可以自动根据调试需求输出 dump 文件的一 ...
- 2019-8-31-PowerShell-使用-WMI-获取信息
title author date CreateTime categories PowerShell 使用 WMI 获取信息 lindexi 2019-08-31 16:55:58 +0800 201 ...
- DNS(4) -- dns功能实现-配置正向解析和反向解析以及DNS递归查询示例
目录 1 DNS配置示例 1.1 DNS解析类型 1.2 配置正向解析 1.3 配置反向解析 1.4 DNS递归查询 1.4.1 开启递归查询 1.4.2 关闭递归查询 1 DNS配置示例 1.1 D ...
- kettle使用3-增量同步(插入的时候判断数据是否存在，存在就更新，不存在就插入)
1.新建转换 2.在DB连接中,新建2个数据库连接 3.在输入中,新建:表输入 4.在输入中,新建:表输入 5.在输出中,新建:插入/更新 说明:更新字段: 是说更新目的表时候,哪些列更新,哪些不更新 ...
- CentOS7部署Redis（离线单机）
一.检查是否安装 ## 检查是否安装了Redis [root@localhost /]# ps -ef | grep redis ## 存在就删除 [root@localhost /]# sudo y ...
- 3 个好玩的前端开源项目「GitHub 热点速览」
单休的周末总是短暂的,还没缓过神新的一周就又开始了.如果你和我一样状态还没有完全恢复,那就让上周好玩的开源项目唤醒你吧! 每周 GitHub 上总是有一些让人眼前一亮的开源项目,上周好玩的前端项目特别 ...