带进度条的下载

src/util/http_util.js

@@ -406,7 +406,7 @@ let format_file = () => {
 }
 //视频播放格式
 let arr_video_format = () => {
-    return ["MP4","MOV", "AVI", "MTS", "WMV", "FLV", "MPEG", "MKV", "M4V", "MPG"]
+    return ["MP4", "MOV", "AVI", "MTS", "WMV", "FLV", "MPEG", "MKV", "M4V", "MPG"]
 }
 //音频播放格式
 let arr_sound_format = () => {
@@ -414,7 +414,7 @@ let arr_sound_format = () => {
 }
 //图片
 let arr_img_format = () => {
-    return ["PSD", "JPEG", "JPG", "PNG", "BMP", "TIF","TIFF"]
+    return ["PSD", "JPEG", "JPG", "PNG", "BMP", "TIF", "TIFF"]
 }
 //人物机构字段确认状态后缀名
 let rw_jg_IsConfirm = () => {
@@ -846,11 +846,10 @@ let downloadOSS = (bucket, filename, originFileName) => {
                 return Promise.reject({ err: res.message });
             }
         }).then(res => res.blob().then(blob => {
-            filename = originFileName|| filename;
             let a = document.createElement('a');
             let url = window.URL.createObjectURL(blob);
             a.href = url;
-            a.download = filename;
+            a.download = originFileName || filename;
             a.click();
             window.URL.revokeObjectURL(url);
             resolve(res.data);
@@ -859,6 +858,71 @@ let downloadOSS = (bucket, filename, originFileName) => {
         });
     });
 }
+
+let downloadOSSProgress = (bucket, filename, originFileName, progressFunction) => {
+    return new Promise((resolve, reject) => {
+        fetch(`api/rest/file/getDownloadUrl?bucket=${bucket}&filename=${filename}`, {
+            headers: new Headers(addHeaders({}))
+        }).then(res => {
+            if (res.status == 200) {
+                return res.json();
+            } else {
+                console.log(res.statusText);
+                reject(HTTP_STATUS);
+            }
+        }).then(res => {
+            if (res.code == 9000) {
+                return fetch(res.data, {
+                    method: "GET",
+                })
+            } else {
+                return Promise.reject({ err: res.message });
+            }
+        }).then(res => {
+            if (res.status == 200) {
+                // 进度条相关
+                // 获取 Response 对象的 body 属性的读取器（reader）。body 属性是一个可读的流（ReadableStream），可以用来读取响应体的数据
+                let reader = res.body.getReader();
+                let receivedLength = 0;
+                let contentLength = res.headers.get('Content-Length');
+                let chunks = [];
+                // 读取一个数据块。这个方法返回一个 Promise，当一个数据块被读取时，这个 Promise 就会解析为一个包含 done 和 value 属性的对象。done 属性表示是否已经读取完所有数据，value 属性是一个 Uint8Array，包含了读取到的数据块。
+                return reader.read().then(function processChunk({ done, value }) {
+                    if (done) {
+                        // 将 chunks 数组中的所有数据块复制到一个新的 Uint8Array 中，然后使用这个 Uint8Array 创建一个 Blob 对象
+                        let data = new Uint8Array(receivedLength);
+                        let position = 0;
+                        for (let chunk of chunks) {
+                            data.set(chunk, position);
+                            position += chunk.length;
+                        }
+
+                        // 下载文件
+                        let a = document.createElement('a');
+                        let url = window.URL.createObjectURL(new Blob([data]));
+                        a.href = url;
+                        a.download = originFileName || filename;
+                        a.click();
+                        window.URL.revokeObjectURL(url);
+                        resolve(done);
+                    }
+                    // 将读取到的数据块添加到 chunks 数组中。
+                    chunks.push(value);
+                    // 更新已接收的数据长度。
+                    receivedLength += value.length;
+                    progressFunction(Math.round(receivedLength / contentLength * 10000) / 100 + "%");//保留两位有效小数
+                    // 递归调用 reader.read()，直到读取完所有数据。
+                    return reader.read().then(processChunk);
+                });
+            } else {
+                console.log(res.statusText);
+                reject(HTTP_STATUS);
+            }
+        }).catch(err => {
+            reject(err);
+        });
+    });
+}
 //#endregion
 
 //#region sse支持
@@ -1009,5 +1073,6 @@ export {
     uploadOSSProgress,
     fetchEventSource,
 
-    downloadOSS
+    downloadOSS,
+    downloadOSSProgress
 }
\ No newline at end of file

src/view/sjgl/wxk_public.vue

@@ -402,6 +402,7 @@ import {
     fileUpload_PUT,
     fileUploadProgress,
     uploadOSSProgress,
+    downloadOSSProgress,
     delete_util,
     startLoading,
     startLoadingProgress,
@@ -875,6 +876,13 @@ export default {
         //文件下载
         downloadLiterature(index, row) {
             downloadDocument('Document', row.file.uuid, row.file.name);
+            // downloadOSSProgress('Document', row.file.uuid, row.file.name, (progress) => {
+            //     console.log(progress);
+            // }).then(res => {
+            //     console.log(res);
+            // }).catch(err => {
+            //     console.log(err);
+            // });
         },
         //打开软件
         handleOpen(index, row) {