[完善]下载功能进度条完成

src/app/is-login.service.ts

@@ -10,15 +10,19 @@ export class IsLoginService {
 
   isLogin:boolean = false; //登录状态
 
+  isDownloading:boolean = false; //下载状态
+  downloadProgress:number = 0;//下载进度
 
 
   //下载
   download (e) {
+    this.isDownloading = true //开启下载进度条
     let file = e
     let fileSize = file.fileLength //下载文件的总大小
     let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB
 
     if (file && fileSize<=shardSize) { //<=10MB时直接下载
+      this.downloadProgress = 70
       this.http.get(`/api/Objects/drives/${file.objectName}`,{responseType: 'blob'},).subscribe(data=>{
         let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
         let link = document.createElement("a");
@@ -27,6 +31,8 @@ export class IsLoginService {
         link.setAttribute("download", e.fileName);
         document.body.appendChild(link);
         link.click();
+        this.isDownloading = false //关闭下载进度条
+        this.downloadProgress = 0 //初始化进度条
       })
     } else if (file && fileSize>shardSize) { //>10MB时分块下载
       this.blockingDownload(e) //分段下载
@@ -51,6 +57,7 @@ export class IsLoginService {
         result(data) }) 
       })
       allFile.push(result)
+      this.downloadProgress = Number((i/allSlice).toFixed(2))*100
 
       if (allFile.length === allSlice) { //合并文件输出给浏览器
         let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
@@ -60,6 +67,8 @@ export class IsLoginService {
         link.setAttribute("download", e.fileName);
         document.body.appendChild(link);
         link.click();
+        this.isDownloading = false //关闭下载进度条
+        this.downloadProgress = 0 //初始化进度条
       }
 
     } //for循环

src/app/ui/all-file/all-file.component.html

@@ -34,10 +34,10 @@
             <mat-progress-bar mode="determinate" [value]="uploadProgress" class="progress"></mat-progress-bar>
           </div>
         
-        <div class="progressBox" *ngIf="downloadisLoading">
+        <div class="progressBox" *ngIf="downloadFile.isDownloading">
         <!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
             <span style="font-size: 12px;">下载中...</span>
-            <mat-progress-bar mode="determinate" [value]="downloadProgress" class="progress" style="left: 52px;top: 13px;"></mat-progress-bar>
+            <mat-progress-bar mode="determinate" [value]="downloadFile.downloadProgress" class="progress" style="left: 52px;top: 13px;"></mat-progress-bar>
         </div>
     </div>
     <div class="rightbox">