Jalara Studio

Mit JavaScript eine .zip-Datei erstellen

#


JSZip ist eine JavaScript-Bibliothek von Stuart Knightley1, die es auf Grund der minimalen API2 sehr einfach ermöglicht, eine .zip-Datei zu erstellen, diese auszulesen oder zu editieren. JSZip ist lizenziert unter der MIT-Lizenz, sowie unter GPL Version33. Im folgenden soll anhand eines Beispiels gezeigt werden, wie eine .zip-Datei mit JSZip erstellt werden kann:

JSZIP einbinden

Eingebunden werden kann die Bibliothek mit HTML wie folgt:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"></script>   

JSZip-Instanz erstellen

Anschießend lässt sich eine neue JSZip-Instanz erstellen:

var zip = new JSZip();

Datei erstellen

Diese lässt sich nun mit der Funktion file()4 verwenden, um beispielsweise eine Datei mit dem Namen hallo-welt.text und der darin enthaltenen Zeichenkette Hallo Welt zu erstellen:

zip.file("hallo-welt.text", "Hallo Welt" );

Zum Erstellen der Datei kann die Funktion generateAsync() werden, sofern der Browser Data URI beherrscht5:

zip.generateAsync({type:"base64"}).then(function (base64) {
 location.href="data:application/zip;base64," + base64;
});

index.html

Folgender Quelltext einer index.html-Datei würde die beschriebene .zip-Datei bereits erstellen:

<html>
    <head><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"></script></head>
    <body>
        <script>
            var zip = new JSZip();
            var textData = "Hallo Welt";
            zip.file("hallo-welt.txt", textData );
            zip.generateAsync({type:"base64"}).then(function (base64) {
                location.href="data:application/zip;base64," + base64;
            });   
        </script>
    </body>
</hmtl>

FileSaver.js

Das Problem an der Data-URI-Methode ist jedoch nicht nur, dass der Internet Explorer diese nicht unterstützt, sondern auch der mangelnde Einfluss auf die Dateibezeichnung. Bei Firefox, Safari und Chrome (Windows) fehlt, nach der Erstellung der .zip-Datei, zudem die Dateiendung .zip.

Aus diesen Gründen kann zusätzlich die JavaScript-Datei FileSaver.js6 von Eli Grey eingebunden werden:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>   

Das Schreiben der .zip-Datei gelingt anschließend mit der Funktion saveAs():

zip.generateAsync({type:"blob"})
.then(function (blob) {
    saveAs(blob, "archiv.zip");
});

Unterstützte JSZIP-Features ermitteln

Ob der Browser Blob, Uint8Array oder ArrayBuffer unterstützt, kann mit JSZip.support7 ermittelt werden:

if(JSZip.support.arraybuffer){
    console.log("ArrayBuffer wird unterstützt.");
 }
if(JSZip.support.uint8array){
    console.log("Uint8Array wird unterstützt.");
 }
 if(JSZip.support.blob){
    console.log("Blob wird unterstützt.");
 }

Wird Blob8 nicht vom Browser unterstützt, wird in der Console die entsprechende Ausgabe fehlen. In diesem Fall kann die JavaScript-Datei Blob.js, ebenfalls von Eli Grey, genutzt werden.9

index.html (mit FileSaver.js und Blob.js)

Der Quelltext der folgenden index.html-Datei enthält neben der FileSaver-Methode und dem Blob-Polyfill auch eine Schaltfläche, die die .zip-Datei nach einem Klick erstellen wird:

<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/blob-polyfill/1.0.20150320/Blob.min.js"></script>   
    </head>
    <body>
    <input type="button" onclick="downloadZip()" value="Erstelle archiv.zip"></input>
    <script>
        function downloadZip(){
            var zip = new JSZip();
            var textData = "Hallo Welt";
            zip.file("hallo-welt.txt", textData );
            zip.generateAsync({type:"blob"})
                .then(function (blob) {
                    saveAs(blob, "archiv.zip");
                 });
    </script>
</body>

Ordner und Bilder erstellen

Ordner und Bilder lassen sich ebenfalls mit den entsprechenden Funktionen (folder()10, file()) in der .zip-Datei erstellen. Im folgendem Beispiel wird ein zuvor mit Base64 kodiertes Bild in den Ordner bilder eingefügt:

var img = zip.folder("bilder");
 var imgData = "R0lGODdhBQAFAIACAAAAAP/eACwAAAAABQAFAAACCIwPkWerClIBADs=";
 img.file("smile.gif", imgData, {base64: true});

JSZipUtils

Wer AJAX verwenden möchte, um Dateien via HTTP GET von einem Server zu holen, kann zudem die JSZip-Erweiterung JSZipUtilsentsprechend einbinden:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils.min.js"></script>
<!--[if IE]><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip-utils/0.0.2/jszip-utils-ie.min.js"></script><![endif]-->

Anschließend kann mit dem Aufruf JSZipUtils und der Funktion getBinaryContent()11 das Bild der .zip-Datei hinzugefügt werden:

JSZipUtils.getBinaryContent("pfad/bild.png", function (err, data) {
    if(err) {
        throw err;
    }
    var zip = new JSZip();
    zip.file("bild.png", data, {binary:true});
});

Links