應用場景: 實現目標: 在網頁端實現大文件(文件大小 >= 2 G) 斷點續傳 實際方案: 發送多次請求, 每次請求一部分文件數據, 然後通過續寫將文件數據全部寫入. 難點: 無法實現文件續寫, 最後採用 StreamSaver 來解決這個問題. 1. 首先從 git hub 將 StreamSav ...
應用場景:
實現目標: 在網頁端實現大文件(文件大小 >= 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;
}
}
將 mitm.html 和 sw.js 文件放到 nginx 伺服器 /streamsaver 目錄下
最後重啟 nginx , 就將授信 https 伺服器改為了自己的伺服器.
如果使用的是自簽名證書, 又沒有在用戶電腦安裝證書, 需要在瀏覽器添加如下配置:
--ignore-certificate-errors
