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

我得到的错误是：

无法识别文件格式。

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

zip.HttpReader不是构造函数

Answer 1

这是你做错的地方

#pragma transparent

首先，异步是不好的做法，不推荐不要使用它
第二：jQuery的ajax不能很好地处理二进制文件。它总是希望将所有内容视为字符串，这将使浏览器解析和转换的二进制文件你不想要它。您的邮政编码将被破坏

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

按原样检索原始二进制文件

或使用新的fetch api

xhr.responseType = 'blob'

所以忘了jQuery ......

如果你想要同步的感觉，那么你应该使用async / await + promises但是这只能在Blink（chrome / opera）中使用，你也可以使用babel

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

使用JavaScript解压缩文件

1 个答案: