|
@@ -209,85 +209,51 @@ class CommonHelper
|
|
|
$('#videoPopup iframe').attr('src', videoUrl); // 设置 iframe 的 src
|
|
|
});
|
|
|
|
|
|
+
|
|
|
$('.downloadVideo').on('click', function(e) {
|
|
|
e.preventDefault();
|
|
|
const button = $(this);
|
|
|
const videoUrl = button.attr('videoUrl');
|
|
|
|
|
|
- // 使用 Dcat Admin 内置 loading 组件
|
|
|
- Dcat.loading({
|
|
|
- shade: 'rgba(0, 0, 0, 0.6)',
|
|
|
- zIndex: 999999,
|
|
|
- background: '#fff'
|
|
|
+ // 开启全局遮罩层(网页3的遮罩思路)
|
|
|
+ const loading = Dcat.loading({
|
|
|
+ shade: 'rgba(0,0,0,0.5)',
|
|
|
+ zIndex: 999999
|
|
|
});
|
|
|
|
|
|
fetch(videoUrl, {
|
|
|
headers: new Headers({
|
|
|
'Origin': location.origin,
|
|
|
- 'X-CSRF-TOKEN': Dcat.token // 集成 CSRF 保护[7](@ref)
|
|
|
+ 'X-CSRF-TOKEN': Dcat.token
|
|
|
}),
|
|
|
mode: 'cors'
|
|
|
}).then(response => {
|
|
|
if (!response.ok) throw new Error(`HTTP \${response.status}`);
|
|
|
|
|
|
- // 动态创建进度条组件
|
|
|
- const progress = new Dcat.Progress({
|
|
|
- title: '下载进度',
|
|
|
- showCancel: true,
|
|
|
- onCancel: () => controller.abort()
|
|
|
- });
|
|
|
-
|
|
|
const reader = response.body.getReader();
|
|
|
- const controller = new AbortController();
|
|
|
- const contentLength = +response.headers.get('Content-Length');
|
|
|
- let receivedLength = 0;
|
|
|
const chunks = [];
|
|
|
|
|
|
- // 流式处理优化
|
|
|
+ // 流式处理核心逻辑(网页5的异步处理思想)
|
|
|
const processChunk = ({ done, value }) => {
|
|
|
- if (done || progress.canceled) {
|
|
|
- if (!progress.canceled) {
|
|
|
- const blob = new Blob(chunks);
|
|
|
- const filename = videoUrl.split('/').pop() || 'video.mp4';
|
|
|
- const link = document.createElement('a');
|
|
|
-
|
|
|
- // 集成 Dcat 文件管理器[6](@ref)
|
|
|
- Dcat.handleFileDownload(blob, filename);
|
|
|
- }
|
|
|
- progress.close();
|
|
|
+ if (done) {
|
|
|
+ const blob = new Blob(chunks);
|
|
|
+ Dcat.handleFileDownload(blob, videoUrl.split('/').pop());
|
|
|
Dcat.loading(false);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
chunks.push(value);
|
|
|
- receivedLength += value.length;
|
|
|
- progress.update({
|
|
|
- percent: Math.round((receivedLength / contentLength) * 100),
|
|
|
- statusText: `\${formatBytes(receivedLength)} / \${formatBytes(contentLength)}`
|
|
|
- });
|
|
|
-
|
|
|
return reader.read().then(processChunk);
|
|
|
};
|
|
|
|
|
|
return reader.read().then(processChunk);
|
|
|
}).catch(error => {
|
|
|
Dcat.loading(false);
|
|
|
- Dcat.error(`下载失败: \${error.message}`);
|
|
|
+ Dcat.error(`下载失败: \${error.message}`); // 网页7的错误处理思路
|
|
|
console.error('Download Error:', error);
|
|
|
});
|
|
|
});
|
|
|
|
|
|
-// 字节单位转换工具函数
|
|
|
-function formatBytes(bytes) {
|
|
|
- const units = ['B', 'KB', 'MB', 'GB'];
|
|
|
- let i = 0;
|
|
|
- while (bytes >= 1024 && i < units.length - 1) {
|
|
|
- bytes /= 1024;
|
|
|
- i++;
|
|
|
- }
|
|
|
- return `\${bytes.toFixed(1)} \${units[i]}`;
|
|
|
-}
|
|
|
-
|
|
|
|
|
|
// 点击关闭按钮关闭视频
|
|
|
$('.close-btn').on('click', function() {
|