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);

它作为一个拉链通过，但是显然存在一个问题，因为它无法打开。有人可以看到我在做什么错吗？

Answer 1

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

zip存档是二进制格式-您将需要做更多的工作来生成一个真实的zip文件，然后以这种方式在客户端缓存它。您可能希望将zip.js视为一个库来帮助您解决这个问题。

不过，您可以进行简单的更改以使下载功能正常工作-只需将"zip1.zip"更改为"zip1.txt"。我已经准备好jsFiddle here if you来观看此操作。

希望有帮助！

Answer 2

我通过将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);

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);

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

3 个答案: