JS：使用Javascript从字符串下载zip文件

Question

我希望从Ajax请求中以字符串形式接收一个zip文件，并将其保存在内存中，以便在需要时可以多次下载，从而只发送一个请求。

我尝试使用以下代码进行下载：

zip_string = 'PK etc.'

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
download("zip1.zip", zip_string);

这个文件通过压缩格式传输，但是因为某些问题无法打开。有没有人看出我的错误所在？

- Rob Kwasowski

---

你应该创建一个 Blob URL 而不是创建一个 base64 字符串，使用 URL.createObjectURL(blob)。 - Endless

Answer 1

在服务器上将zip文件字符串编码为base64后再发送，我解决了这个问题。

with open(file, "rb") as f:
    bytes = f.read()
    encoded = base64.b64encode(bytes)

然后在JS中，我只需指定它是base64格式：

zip_string = 'UEsDBBQAAAAIANQzCU0J56mLPAIAAD4VAAAOAAAA etc.'

function download(filename, data) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;base64,' + data);
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// Start file download.
download("zip1.zip", zip_string);

- Rob Kwasowski

---

我想知道是否有一种方法可以不使用base64编码，通过指定正确的Blob类型来下载zip文件？ - Harry Moreno

Answer 2

你链接的数据类型是纯文本（即由data:text/plain指定），这基本上意味着，浏览器将把链接内容视为纯文本。

zip档案是二进制格式-您需要做更多的工作来生成一个真正的zip文件，然后在客户端缓存它。您可能想看看zip.js作为帮助您完成此操作的库。

但是，您可以进行简单的更改以使下载功能正常工作-只需将"zip1.zip"更改为"zip1.txt"。如果您想查看此过程，请参阅jsFiddle here if you。

希望这有所帮助！

- Dacre Denny

---

谢谢，但我想要一个实际的.zip文件可供下载，而不是一个.txt文件。 - Rob Kwasowski

Answer 3

使用JSZip软件包：https://stuk.github.io/jszip/

public async downloadFile(filename: string, content: string) {
        const zip = new JSZip();
        await zip.loadAsync(content, {base64: true});
        const blob = await zip.generateAsync({type:"blob"});

        const element = document.createElement("a");
        element.setAttribute("href", window.URL.createObjectURL(blob));
        element.setAttribute("download", filename);
        element.style.display = "none";
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    }


const fileName = "test.zip";
const content = "UEsDBAoAAAAAAI5ONE9i6ZVwCQAAAAkAAAAIAAAAdGVzdC50eHRUZXN0IGZpbGVQSwECPwAKAAAAAACOTjRPYumVcAkAAAAJAAAACAAkAAAAAAAAACAAAAAAAAAAdGVzdC50eHQKACAAAAAAAAEAGABz76T2f2/VAXPvpPZ/b9UB1NBncjhp1QFQSwUGAAAAAAEAAQBaAAAALwAAAAAA"; // base64 content without mimeType

this.downloadFile(fileName, content);

- C. Draghici

---

这是一个很棒的库！ - supersan