javascript - 如何从网站内部下载整个网站

Question

我正在制作一个网站，我想在其中为用户提供下载整个网站(包括 CSS 和图像)供他们修改的功能。我知道我可以下载个人资源

<a href="./resource.extention" download="filename">Click Me</a>

但正如我所说，这只会下载一个文件，而我想下载整个网站。

如果它能帮助您理解我的意思:在 chrome、IE 和 Firefox 中，您可以按 ctrl+s 下载整个网站(确保将其另存为 Web page, Complete。

编辑:我知道我可以创建一个它会下载的 .zip 文件，但是这样做需要我在每次进行更改时更新它，这是我不想做的事情，因为我可能会做出很多改变。

Answer 1

正如我提到的，你最好有一个 cron job或类似的东西，偶尔会为您创建一个包含所有所需静态内容的 zip 文件。

如果您坚持在客户端使用 javascript 执行此操作，请查看 JSZip .

您仍然必须找到一种方法来获取要保存的服务器静态文件列表。 例如，您可以创建一个 txt 文件，其中每一行都是指向网页静态文件的链接。

您将不得不遍历此文件并使用 $.get 获取它的内容。

像这样:

// Get list of files to save (either by GET request or hardcoded)
filesList = ["f1.json /echo/jsonp?name=1", "inner/f2.json /echo/jsonp?name=2"];

function createZip() {
    zip = new JSZip();

    // make bunch of requests to get files content
    var requests = [];
    // for scoping the fileName
    _then = (fname) => data => ({ fileName: fname, data });
    for (var file of filesList) {
        [fileName, fileUrl] = file.split(" ");
        requests.push($.get(fileUrl).then(_then(fileName)));
    }

    // When all finished
    $.when(...requests).then(function () {
        // Add each result to the zip
        for (var arg of arguments) {
            zip.file(arg.fileName, JSON.stringify(arg.data));
        }

        // Save
        zip.generateAsync({ type: "blob" })
            .then(function (blob) {
                saveAs(blob, "site.zip");
            });
    });
}

$("#saver").click(() => {
    createZip();
});

JSFiddle

就我个人而言，我不喜欢这种方法。但随心所欲。