javascript - 如何在javascript上解压缩文件

Question

我正在使用 html5/js 开发混合移动应用程序。它具有下载 zip 文件然后解压缩的功能。下载功能没问题，但我不知道如何解压缩文件(使用 javascript)。很多人引用zip.js但它似乎只读取 zip 文件(不解压缩/提取到新文件夹)

如果有人能帮助我，我将不胜感激!!!

Answer 1

查看 zip.js 文档和 demo page .还要注意使用 JavaScript filesystem API读/写文件和创建临时文件。

如果 zip 文件包含多个条目，您可以阅读 zip 文件条目并显示一个链接表以下载每个单独的文件，如上面的演示所示。

如果您查看演示页面的源代码，您会看到以下代码(代码从 Github 演示页面粘贴到 zip.js)(我添加了注释来解释):

function(obj) {
//Request fileSystemObject from JavaScript library for native support
var requestFileSystem = obj.webkitRequestFileSystem || obj.mozRequestFileSystem || obj.requestFileSystem;

function onerror(message) {
    alert(message);
}
//Create a data model to handle unzipping and downloading

var model = (function() {
    var URL = obj.webkitURL || obj.mozURL || obj.URL;

    return {
        getEntries : function(file, onend) {
            zip.createReader(new zip.BlobReader(file), function(zipReader) {
                zipReader.getEntries(onend);
            }, onerror);
        },
        getEntryFile : function(entry, creationMethod, onend, onprogress) {
            var writer, zipFileEntry;

            function getData() {
                entry.getData(writer, function(blob) {
                    var blobURL = creationMethod == "Blob" ? URL.createObjectURL(blob) : zipFileEntry.toURL();
                    onend(blobURL);
                }, onprogress);
            }
            //Write the entire file as a blob
            if (creationMethod == "Blob") {
                writer = new zip.BlobWriter();
                getData();
            } else {
                //Use the file writer to write the file clicked by user.
                createTempFile(function(fileEntry) {
                    zipFileEntry = fileEntry;
                    writer = new zip.FileWriter(zipFileEntry);
                    getData();
                });
            }
        }
    };
})();

(function() {
    var fileInput = document.getElementById("file-input");
    var unzipProgress = document.createElement("progress");
    var fileList = document.getElementById("file-list");
    var creationMethodInput = document.getElementById("creation-method-input");
    //The download function here gets called when the user clicks on the download link for each file.

    function download(entry, li, a) {
        model.getEntryFile(entry, creationMethodInput.value, function(blobURL) {
            var clickEvent = document.createEvent("MouseEvent");
            if (unzipProgress.parentNode)
                unzipProgress.parentNode.removeChild(unzipProgress);
            unzipProgress.value = 0;
            unzipProgress.max = 0;
            clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.href = blobURL;
            a.download = entry.filename;
            a.dispatchEvent(clickEvent);
        }, function(current, total) {
            unzipProgress.value = current;
            unzipProgress.max = total;
            li.appendChild(unzipProgress);
        });
    }

    if (typeof requestFileSystem == "undefined")
        creationMethodInput.options.length = 1;
    fileInput.addEventListener('change', function() {
        fileInput.disabled = true;
      //Create a list of anchor links to display to download files on the web page
        model.getEntries(fileInput.files[0], function(entries) {
            fileList.innerHTML = "";
            entries.forEach(function(entry) {
                var li = document.createElement("li");
                var a = document.createElement("a");
                a.textContent = entry.filename;
                a.href = "#";
         //Click event handler
                a.addEventListener("click", function(event) {
                    if (!a.download) {
                        download(entry, li, a);
                        event.preventDefault();
                        return false;
                    }
                }, false);
                li.appendChild(a);
                fileList.appendChild(li);
            });
        });
    }, false);
})();

})(this);