能否通过XMLHttpRequest下载目录全部文件并打包压缩？

要完成整个文件夹的下载打包，你需要先解析目录页面获取所有文件链接，再批量下载文件并打包成ZIP，具体实现如下：

核心思路 #

1. 请求目标目录的HTML页面，提取页面里的所有文件链接（过滤掉导航用的..和.）
2. 逐个下载每个文件，获取对应的Blob对象
3. 用jszip库把所有Blob打包成ZIP文件，最后触发浏览器下载

完整代码 #

先引入jszip库，替换你原有的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script>
const host = "https://web.stanford.edu/class/cs224w/slides/";

// 解析目录页面，提取所有文件链接
async function fetchFileLinks() {
    const res = await fetch(host);
    const html = await res.text();
    const doc = new DOMParser().parseFromString(html, "text/html");
    
    return Array.from(doc.querySelectorAll("a"))
        .filter(link => {
            const text = link.textContent.trim();
            return text !== ".." && text !== "." && !link.href.endsWith("/");
        })
        .map(link => new URL(link.href, host).href);
}

// 下载单个文件，返回文件名和Blob
async function getFileBlob(url) {
    const res = await fetch(url);
    return {
        filename: url.split("/").pop(),
        blob: await res.blob()
    };
}

// 打包所有文件为ZIP并下载
async function downloadFolderZip() {
    const fileLinks = await fetchFileLinks();
    const zip = new JSZip();
    
    // 并行下载所有文件并添加到ZIP
    await Promise.all(fileLinks.map(async url => {
        const { filename, blob } = await getFileBlob(url);
        zip.file(filename, blob);
    }));
    
    // 生成ZIP并触发下载
    const zipBlob = await zip.generateAsync({ type: "blob" });
    const downloadUrl = URL.createObjectURL(zipBlob);
    const a = document.createElement("a");
    a.href = downloadUrl;
    a.download = "cs224w-slides.zip";
    a.click();
    URL.revokeObjectURL(downloadUrl);
}

// 启动下载
downloadFolderZip();
</script>

注意点 #

• 确认目标服务器允许跨域请求（CORS），如果出现跨域错误，需要服务器配置对应的CORS响应头
• 如果文件夹里有子目录，需要额外处理递归解析子目录的逻辑，当前代码只处理一级目录下的文件
• jszip是前端成熟的ZIP处理工具，也可以替换成其他同类型库

内容的提问来源于stack exchange，提问作者Khương Mai