Datei innerhalb eines ZIP-Archivs mit HTML5 & JSZip dekomprimieren

In unserem vorherigen Beitrag Lokale ZIP-Datei in HTML5/Javascript mit JSZip lesen haben wir ein Beispiel gezeigt, wie JSZip verwendet wird, um Dateien in einem lokalen ZIP-Archiv mit HTML5 aufzulisten.

Dieser Beitrag erweitert dies, um den Inhalt einer in einer lokalen ZIP-Archivdatei komprimierten Datei zu lesen.

In diesem Beispiel wird eine lokale ZIP-Datei mit HTML5 <input type="file"> gelesen und ihr Inhalt dekomprimiert. Die Datei word/document.xml wird gelesen, sodass zum Testen eine beliebige .docx-Datei hochgeladen werden kann.

uncompress.js

JSZip.loadAsync(ev.target.result).then(function(zip) {
    zip.file("word/document.xml").async("ArrayBuffer").then(function(data) {
        // data is an ArrayBuffer
        // TODO Your code goes here!
    })
}).catch(function(err) {
    console.error("Failed to open", filename, " as ZIP file:", err);
})

JSZip.loadAsync(ev.target.result).then(function(zip) {
    zip.file("word/document.xml").async("ArrayBuffer").then(function(data) {
        // data is an ArrayBuffer
        // TODO Your code goes here!
    })
}).catch(function(err) {
    console.error("Failed to open", filename, " as ZIP file:", err);
})

Vollständiges Beispiel

index.html

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />

    <script src="https://unpkg.com/[email protected]/dist/jszip.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            var filename = fileInput.files[0].name;
            var reader = new FileReader();
            reader.onload = function(ev) {
                JSZip.loadAsync(ev.target.result).then(function(zip) {
                    zip.file("word/document.xml").async("ArrayBuffer").then(function(data) {
                        // data is an ArrayBuffer
                        // TODO Your code goes here!
                    })
                }).catch(function(err) {
                    console.error("Failed to open", filename, " as ZIP file:", err);
                })
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>

<html>
<body>
    <input type="file" id="myfile" onchange="onMyfileChange(this)" />

    <script src="https://unpkg.com/jszip@3.7.1/dist/jszip.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onMyfileChange(fileInput) {
            if(fileInput.files[0] == undefined) {
                return ;
            }

            var filename = fileInput.files[0].name;
            var reader = new FileReader();
            reader.onload = function(ev) {
                JSZip.loadAsync(ev.target.result).then(function(zip) {
                    zip.file("word/document.xml").async("ArrayBuffer").then(function(data) {
                        // data is an ArrayBuffer
                        // TODO Your code goes here!
                    })
                }).catch(function(err) {
                    console.error("Failed to open", filename, " as ZIP file:", err);
                })
            };
            reader.onerror = function(err) {
                console.error("Failed to read file", err);
            }
            reader.readAsArrayBuffer(fileInput.files[0]);
        }
    </script>
</body>
</html>

Check out similar posts by category: HTML, Javascript

If this post helped you, please consider buying me a coffee or donating via PayPal to support research & publishing of new posts on TechOverflow

Buy me a coffee