84

我想使用 Web 浏览器在客户端显示OpenOffice文件、.odt 和 .odp。

这些文件是压缩文件。使用 Ajax，我可以从服务器获取这些文件，但这些是压缩文件。我必须使用JavaScript解压缩它们，我尝试使用 inflate.js，http: //www.onicos.com/staff/iz/amuse/javascript/expert/inflate.txt ，但没有成功。

我怎样才能做到这一点？

4

8 回答 8

60

我用Javascript写了一个解压缩器。有用。

它依赖于Andy GP Na 的二进制文件阅读器和来自 notmasteryet 的一些 RFC1951 膨胀逻辑。我添加了 ZipFile 类。

工作示例：
http ://cheeso.members.winisp.net/Unzip-Example.htm （死链接）

来源：
http ://cheeso.members.winisp.net/srcview.aspx?dir=js-unzip （死链接）

注意：链接已失效；我很快就会找到一个新的主人。

源代码中包含一个 ZipFile.htm 演示页面和 3 个不同的脚本，一个用于 zipfile 类，一个用于 inflate 类，一个用于二进制文件阅读器类。该演示还依赖于 jQuery 和 jQuery UI。如果您只是下载 js-zip.zip 文件，那么所有必要的源代码都在那里。

下面是应用程序代码在 Javascript 中的样子：

// In my demo, this gets attached to a click event.
// it instantiates a ZipFile, and provides a callback that is
// invoked when the zip is read.  This can take a few seconds on a
// large zip file, so it's asynchronous. 
var readFile = function(){
    $("#status").html("<br/>");
    var url= $("#urlToLoad").val();
    var doneReading = function(zip){
        extractEntries(zip);
    };

    var zipFile = new ZipFile(url, doneReading);
};


// this function extracts the entries from an instantiated zip
function extractEntries(zip){
    $('#report').accordion('destroy');

    // clear
    $("#report").html('');

    var extractCb = function(id) {
        // this callback is invoked with the entry name, and entry text
        // in my demo, the text is just injected into an accordion panel.
        return (function(entryName, entryText){
            var content = entryText.replace(new RegExp( "\\n", "g" ), "<br/>");
            $("#"+id).html(content);
            $("#status").append("extract cb, entry(" + entryName + ")  id(" + id + ")<br/>");
            $('#report').accordion('destroy');
            $('#report').accordion({collapsible:true, active:false});
        });
    }

    // for each entry in the zip, extract it. 
    for (var i=0; i<zip.entries.length;  i++) {
        var entry = zip.entries[i];

        var entryInfo = "<h4><a>" + entry.name + "</a></h4>\n<div>";

        // contrive an id for the entry, make it unique
        var randomId = "id-"+ Math.floor((Math.random() * 1000000000));

        entryInfo += "<span class='inputDiv'><h4>Content:</h4><span id='" + randomId +
            "'></span></span></div>\n";

        // insert the info for one entry as the last child within the report div
        $("#report").append(entryInfo);

        // extract asynchronously
        entry.extract(extractCb(randomId));
    }
}

该演示分几个步骤进行：readFilefn 由单击触发，并实例化一个 ZipFile 对象，该对象读取 zip 文件。当读取完成时有一个异步回调（对于合理大小的 zip，通常在不到一秒的时间内发生） - 在这个演示中，回调保存在 doneReading 局部变量中，它只是调用extractEntries，它只是盲目地解压缩所提供的所有内容压缩文件。在一个真实的应用程序中，您可能会选择一些要提取的条目（允许用户选择，或以编程方式选择一个或多个条目等）。

extractEntriesfn 遍历所有条目，并调用每个条目，并extract()传递一个回调。一个条目的解压需要时间，对于 zipfile 中的每个条目可能需要 1s 或更多时间，这意味着异步是合适的。提取回调只是将提取的内容添加到页面上的 jQuery 手风琴中。如果内容是二进制的，那么它会被格式化（未显示）。

它有效，但我认为该实用程序有些有限。

一方面：它非常慢。从 PKWare 解压缩 140k AppNote.txt 文件大约需要 4 秒。在 .NET 程序中，同样的解压缩可以在不到 0.5 秒的时间内完成。 编辑：在 IE9 和 Chrome 中，Javascript ZipFile 的解包速度比现在快得多。它仍然比编译程序慢，但对于正常的浏览器使用来说已经足够快了。

另一方面：它不做流媒体。它基本上将 zipfile 的全部内容吞入内存。在“真实”编程环境中，您可以只读取 zip 文件的元数据（例如，每个条目 64 字节），然后根据需要读取和解压缩其他数据。据我所知，没有办法在 javascript 中进行像这样的 IO，因此唯一的选择是将整个 zip 读入内存并在其中进行随机访问。这意味着它将对大型 zip 文件的系统内存提出不合理的要求。对于较小的 zip 文件来说问题不大。

另外：它不处理“一般情况”的 zip 文件——有很多我没有费心在解压缩器中实现的 zip 选项——比如 ZIP 加密、WinZip 加密、zip64、UTF-8 编码文件名等等上。（编辑- 它现在处理 UTF-8 编码的文件名）。不过，ZipFile 类处理基础知识。其中一些事情并不难实现。我在 Javascript 中有一个 AES 加密类；可以集成以支持加密。对于大多数 Javascript 用户来说，支持 Zip64 可能毫无用处，因为它旨在支持 >4gb 的 zipfile - 不需要在浏览器中提取这些文件。

我也没有测试解压缩二进制内容的情况。现在它解压缩文本。如果您有一个压缩的二进制文件，则需要编辑 ZipFile 类以正确处理它。我不知道如何干净地做到这一点。 它现在也处理二进制文件。

编辑- 我更新了 JS 解压缩库和演示。除了文本之外，它现在还处理二进制文件。我使它更具弹性和更通用 - 您现在可以指定在读取文本文件时使用的编码。演示也被扩展了——它显示了在浏览器中解压缩 XLSX 文件等。

所以，虽然我认为它的效用和兴趣有限，但它确实有效。我想它会在 Node.js 中工作。

于 2010-01-19T21:38:28.753 回答
27

I'm using zip.js and it seems to be quite useful. It's worth a look!

Check the Unzip demo, for example.

于 2012-06-17T00:58:46.330 回答
19

我发现jszip非常有用。到目前为止，我只用于阅读，但它们也具有创建/编辑功能。

代码明智的看起来像这样

var new_zip = new JSZip();
new_zip.load(file);
new_zip.files["doc.xml"].asText() // this give you the text in the file

我注意到的一件事是，文件似乎必须是二进制流格式（使用 FileReader() 的 .readAsArrayBuffer 读取，否则我收到错误消息说我可能有损坏的 zip 文件

编辑：从 2.x 到 3.0.0 升级指南的注意事项：

load() 方法和带有数据的构造函数 (new JSZip(data)) 已被 loadAsync() 替换。

感谢用户2677034

于 2014-12-09T17:18:13.717 回答
7

如果您还需要支持其他格式或只需要良好的性能，您可以使用这个WebAssembly 库

它是基于承诺的，它使用 WebWorkers 进行线程处理，API 实际上是简单的 ES 模块

于 2018-10-30T20:36:49.193 回答
3

我写了“JavaScript 的二进制工具”，一个开源项目，包括解压缩、解压缩和解压缩的能力：https ://github.com/codedread/bitjs

在我的漫画书阅读器中使用：https ://github.com/codedread/kthoom （也是开源的）。

！

于 2014-07-11T22:05:46.033 回答
2

Code example is given on the author site's. You can use babelfish to translate the texts (Japanese to English).

As far as I understand Japanese, this zip inflate code is meant to decode ZIP data (streams) not ZIP archive.

于 2010-01-19T18:20:15.950 回答
2

我也为此写了一个类。 http://blog.another-d-mention.ro/programming/read-load-files-from-zip-in-javascript/ 您可以使用类方法直接从 zip 加载基本资产，例如 javascript/css/images。希望能帮助到你

于 2011-08-07T16:33:52.080 回答
2

如果有人从远程服务器上托管的 zip 文件中读取图像或其他二进制文件，您可以使用以下代码段下载并使用jszip库创建 zip 对象。

// this function just get the public url of zip file.
let url = await getStorageUrl(path) 
console.log('public url is', url)
//get the zip file to client
axios.get(url, { responseType: 'arraybuffer' }).then((res) => {
  console.log('zip download status ', res.status)
//load contents into jszip and create an object
  jszip.loadAsync(new Blob([res.data], { type: 'application/zip' })).then((zip) => {
    const zipObj = zip
    $.each(zip.files, function (index, zipEntry) {
    console.log('filename', zipEntry.name)
    })
  })

现在使用 zipObj 您可以访问这些文件并为其创建一个 src url。

var fname = 'myImage.jpg'
zipObj.file(fname).async('blob').then((blob) => {
var blobUrl = URL.createObjectURL(blob)
于 2020-11-18T09:52:18.733 回答