使用 JavaScript 解压缩文件答案

【问题标题】：Uncompress a file with JavaScript使用 JavaScript 解压缩文件
【发布时间】：2017-03-15 20:36:10
【问题描述】：

我需要将 json 文件加载到 Javascript 容器中。在用户的浏览器上，json 文件被加载到处理数据的 Javascript 库中。然而，这个文件变得非常大（10MB），但如果我压缩它，我可以把它缩小到 100KB。

因此，我想在服务器上压缩文件，使用 ajax 下载，解压缩并将其加载到我的 javascript 容器中。

生成 zip 文件很容易。我正在努力的是下载文件并解压缩它。我找到了一个名为zip.js 的库。我已经按照他们的示例进行操作，但我无法让它发挥作用。我认为我加载文件的方式不正确。

这是我目前拥有的：

var file_data = $.ajax({
            url: "/path/to/file.zip",
            async: false
         }).responseText;

zip.createReader(new zip.TextReader(file_data), function(reader) {
  // get all entries from the zip
  reader.getEntries(function(entries) {
    if (entries.length) {
      // get first entry content as text
      entries[0].getData(new zip.TextWriter(), function(text) {
        // text contains the entry data as a String
        console.log(text);
        // close the zip reader
        reader.close(function() {
          // onclose callback
        });

      }, function(current, total) {
        // onprogress callback
      });
    }
  });
}, function(error) {
  // onerror callback
  console.log(error);
});

我得到的错误是：

文件格式无法识别。

我也尝试了 BlobReader，但没有成功，而且 HttpReader 类不适合我，我明白了

zip.HttpReader 不是构造函数

【问题讨论】：

如果您只是将服务器设置为在发送文件时对其进行 gzip 压缩，您会省去很多麻烦。
我不确定你的意思？服务器会自动压缩所有文件，浏览器会自动解压吗？
是的，就是这个意思。浏览器内置了解压功能。
我没有提到的是我实际上是动态生成json文件（使用Django）。是否可以将 gzip 与动态文件一起使用？
服务器不关心文件是如何创建的。

标签： javascript jquery zip.js

【解决方案1】：

这是你做错的地方

var file_data = $.ajax({
    url: "/path/to/file.zip",
    async: false
}).responseText;

首先，异步是不好的做法，不推荐使用，不要使用它
second：jQuery 的 ajax 不能很好地处理二进制文件。它总是希望将所有内容都视为字符串，这将使二进制文件被浏览器解析和转换
您不希望这样。您的 zip 数据将被损坏

您应该使用xhr.responseType = 'blob' 原样检索原始二进制文件

或使用新的 fetch api

fetch('file.zip').then(res => res.blob()).then(unzipBlob)

所以忘记 jQuery...

如果你想要一种同步的感觉，那么你应该使用 async/await + promises 这仅在 Blink (chrome/opera) 中可用，你也可以使用 babel

async function downlaod() {
   let res = await fetch(file)
   let file_data = await res.blob()

   // and so on...
}

【讨论】：