【前端】jszip+file-saver：多个视频url下载到zip、页面预加载视频、预览视频、强制刷新视频

场景

服务端下发视频链接，前端可以多选，下载到一个zip中。

代码

需要用到的库：

import { saveAs } from "file-saver";
import JSZip from "jszip";

将视频链接url转成Blob

const handleGetBlob = async (url) => {if (!url.length) return;const blob = await (await fetch(url)).blob();return blob;
};

Blob简介：

Blob 是一种用来存储大块二进制数据（比如文件、图片、视频等） 的对象。你可以把它想象成一个“包裹”，里面装着各种类型的数据，比如文本、图片、视频等等。
比如，当你上传一张图片到网页时，浏览器会把它暂时存放在内存中，而不是直接发送到服务器。这时候，这张图片就会被封装成一个 Blob 对象。你也可以用 Blob 来存储一些临时的数据，比如生成一个文件或者处理视频流。

在前端开发中，Blob 很常用，比如：

• 处理文件上传：当你上传文件时，文件会被转换成 Blob，方便在浏览器中预览或处理。
• 缓存数据：你可以把一些数据（比如下载的内容）存放在 Blob 中，避免频繁请求服务器。
• 生成下载链接：通过 Blob，你可以动态生成一个文件，让用户下载。

总之，Blob 是一个非常灵活且强大的工具，用来处理各种类型的数据，尤其是在需要本地存储或快速操作数据时非常有用。

添加到blob，并下载

const download = async (row, index) => {// ... 获取一个blob。如果是多个视频，就是多个blobconst zipContent = [{blob,videoContent: row.videoContent,},];saveAsZip(zipContent, row.s_title);
};

const saveAsZip = async (files: ZIPContent[], title) => {// 新增一个zip文件const zip = new JSZip();// 将所有文件添加到 ZIP 文件中files.forEach((item: ZIPContent) => {const blob = item.blob;const videoContent = item.videoContent;const fileName = `${title} - 第${videoContent}集.${blob.type.split("/")[1]}`; // 根据 MIME 类型推断文件扩展名// 在zip中新增文件zip.file(fileName, blob);});// 生成 ZIP 文件的 Blobconst zipBlob = await zip.generateAsync({type: "blob",compression: "DEFLATE", // 使用 DEFLATE 压缩compressionOptions: { level: 9 }, // 压缩级别（0-9）});// 下载 ZIP 文件saveAs(zipBlob, `${title}.zip`);
};

实测可以下载。

其他

页面预加载视频

服务端下发视频url后，把所有url都生成为blobUrl。不要在点击【预览】的时候才生成blobUrl。

页面预览视频：blobUrl

如果想要生成一个blob的url，如用于视频的播放：

const blob = await (await fetch(url)).blob();
const blobUrl = URL.createObjectURL(blob);
currentUrl.value = blobUrl;

则可以使用URL.createObjectURL生成url

强制视频元素重新加载

如果在页面中可以预览视频的上下集，在切换了上下集后，currentUrl更新，需要强制视频元素重新加载：

<div v-if="currentUrl && currentUrl.length"><videoref="videoRef"style="text-align: center; width: 100%; height: 300px"controlsautoplaymutedpreload="metadata"><source:src="currentUrl":key="currentIndex"type="video/mp4"/>您的浏览器不支持 video 标签。</video>
</div>
<div v-else>暂无视频</div>

const videoRef = ref<HTMLVideoElement>();
const handleVideoLoad = () => {// 强制视频元素重新加载if (videoRef.value) {videoRef.value.pause();videoRef.value.currentTime = 0;videoRef.value.load();}
};

多选视频并下载到zip

需要注意：forEach不会等待异步，因此需要用for

await ElMessageBox.confirm("确认批量下载选中剧集？", "批量下载操作").then(async () => {const files: ZIPContent[] = [];// 使用 for 循环处理异步操作：forEach不支持异步for (let i = 0; i < multipleSelection.value.length; i++) {const item = multipleSelection.value[i]; // table多选的列表const index = tableData.value.list.findIndex((dataItem) => dataItem.videoContent === item.videoContent);// 异步获取Blob文件const blob = await getBlob(index, item);files.push({blob,videoContent: item.videoContent,});}// 下载saveAsZip(files, multipleSelection.value[0].s_title);// 清空选中列表clearSelection();}
);