使用 JavaScript 解压缩文件

Question

我需要将 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);
});

我得到的错误是：

File format is not recognized.

我也试过 BlobReader 但没有成功，HttpReader class 对我不起作用，我得到

zip.HttpReader is not a constructor

Answer 1

这就是你做错的地方

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

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

您应该按原样使用 xhr.responseType = 'blob'

检索原始二进制文件

或使用新的提取 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...
}

使用 JavaScript 解压缩文件

Uncompress a file with JavaScript

javascript

jquery

zip.js