Dateien in Webanwendung erstellen und als ZIP herunterladen mit JSZip

VonThe Gou

Mit der Javascript Bibliothek JSZip lassen sich ganz leicht Inhalte in Dateien schreiben und als ZIP herunterladen. Wir schauen mal, wie das geht.

Will man aus einer Anwendung heraus Dateien erzeugen und als Zip downloaden, z.B. für generierte Config-Files oder generierten Code, lässt sich das sehr leicht mit der Javascript Bibliothek JSZip bewerkstelligen.

Installieren und Einbinden

Die Bibliothek kann ganz einfach über die offizielle Seite heruntergeladen werden oder mittels Npm oder Bower installiert werden.

Installation per Bower:

bower install Stuk/jszip

Nun kann die Bibliothek eingebunden werden:

dist/jszip.js oder dist/jszip.min.js

Minimales Beispiel

In dieser Stück Code von der JSZip-Webseite wird eine Hello.txt angelegt, mit Text gefüllt und zusammen mit einem Bild gezippt.

var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"blob"})
.then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

Beispielanwendung mit AngularJS

jszip-1

Jetzt wollen wir das selbst mal ausprobieren und eine kleine Anwendung schreiben, die eine Texteingabe in eine Datei schreibt und zusammen mit einem Base64-Bild als ZIP herunterlädt.

<!DOCTYPE html>
<html ng-app="App">
    <head>
        <title>Get a Zip</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="./bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">   
    </head>
    <body>
        <div class="container" ng-controller="AppCtrl">
            <div class="row">
                <div class="col-lg-12">
					<h2>Example App - Save Input as Zip</h2>
                    <textarea class="form-control" rows="3" ng-model="text"></textarea>
                    <button class="btn btn-primary" ng-click="saveZip()">Save all as Zip</button>  
                </div>
            </div>
        </div><!-- /.container -->

        <script src="./bower_components/angular/angular.min.js"></script>
        <script src="./bower_components/jquery/dist/jquery.min.js"></script>
        <script src="./bower_components/jszip/dist/jszip.js"></script>
        <script src="./bower_components/jszip/vendor/FileSaver.js"></script>
        <script src="./app.js"></script>
    </body>
</html>


'use strict';
var app = angular.module('App', []);
app.controller('AppCtrl', function ($scope) {
    $scope.saveZip = function() { 
        var imgData = "R0lGODlhPQ...";  
        var zip = new JSZip();
        zip.file("index.html", $scope.text);
        var img = zip.folder("images");
        img.file("example.gif", imgData, {base64: true});
        zip.generateAsync({type:"blob"})
        .then(function(content) {
            // see FileSaver.js
            saveAs(content, "website.zip");
        });
    };
});

Und das war es auch schon. Für mich eine sehr nützliche Bibliothek, die in dem ein oder anderen Projekt Anwendung finden wird.
Ich hoffe wie immer, dieses erstbeste Beispiel war hilfreich.

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert