前端实现压缩包下载——JSZip

在浏览器环境中，你可以使用 JavaScript 中的 fetch 和 JSZip 库来实现将多个视频地址下载成一个压缩包。JSZip 是一个用于创建和解析 ZIP 文件的库。

npm install jszip

// 模拟数据
const videoInfo = [
  {
    videoUrl: 'https://www.youtube.com/watch',
    videoName: '视频名称1'
  },
  {
    videoUrl: 'https://www.youtube.com/look',
    videoName: '视频名称2'
  }
]

import JSZip from "jszip";

/**
 * 
 * @param {String} zipName 压缩包名
 * @param {Array} videoInfo 要下载的数据
 * @param {String} urlKey 下载地址的key
 * @param {String} videoNameKey 下载的文件名
 */
export function downloadVideosAsZip(zipName, videoInfo, urlKey, videoNameKey) {
    const zip = new JSZip();
    const fetchAndAddToZip = async (video, index) => {
        try {
            const response = await fetch(video[urlKey]);
            const videoBlob = await response.blob();

            // 将视频添加到 ZIP 中，使用 index 作为文件名
            zip.file(`${video[videoNameKey]}.mp4`, videoBlob);
        } catch (error) {
            console.error(`Error fetching or adding video ${index}:`, error);
        }
    };
    // 使用 Promise.all 来并行下载多个视频
    const downloadPromises = videoInfo.map((video, index) =>
        fetchAndAddToZip(video, index)
    );

    Promise.all(downloadPromises)
        .then(() => {
            // 生成 ZIP 文件
            return zip.generateAsync({ type: "blob" });
        })
        .then((zipBlob) => {
            // 创建一个链接
            const zipUrl = URL.createObjectURL(zipBlob);

            // 创建一个隐藏的 <a> 元素，设置链接并模拟点击
            const a = document.createElement("a");
            a.href = zipUrl;
            a.download = zipName + '.zip';
            a.style.display = "none";
            document.body.appendChild(a);
            a.click();

            // 释放链接
            URL.revokeObjectURL(zipUrl);

            // 移除 <a> 元素
            document.body.removeChild(a);
        })
        .catch((error) => {
            console.error("Error creating zip file:", error);
        });
};