Dateien in Webanwendung erstellen und als ZIP herunterladen mit JSZip

VonThe Gou 22. September 2016

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

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.

Javascript – Wie man aus einem String einen Hash generiert

VonCaucus 20. September 202020. November 2020

Wir zeigen eine Möglichkeit, wie man mit Javascript aus einem String einen Hash generieren kann. Wie immer nur die erstbesten Lösungen.

KendoUi – AutoHide Problem bei Tooltip an KenoGrid mit Resizer

VonCaucus 2. April 20152. April 2015

Verwendet man Kendo-Tooltips in einem KendoGrid mit Spaltenresizer werden die Tooltips nicht mehr geschlossen, wenn man das Element über den Resizer verlässt. Wir zeigen warum und wie man das behebt.

Javascript – Wie man distinct values von einem Array von Objekten bekommt

VonCaucus 12. November 201913. November 2019

Es gibt Aufgaben, bei denen ich immer wieder nachschauen muss, wie es am besten geht. Heute: Wie man die Werte eines Property aus einem Array von Objekten bekommt. Ohne Duplikate. Here we go!

Node.js – Wie verwende ich NPM für Node.js hinter einem Firmen Web Proxy

VonCaucus 27. Oktober 20148. November 2014

Kurzbeschreibung des Setzen der Proxy-Einstellungen für NPM, um auch hinter einem Firmen Web Proxy Module für Node.js installieren zu können.

Javascript – Wie man Min und Max aus einem Array ermittelt

VonCaucus 13. November 2019

Das nächste Javascript-Snippet. Heute: Wie man die Min- und Max-Werte aus einem Array bzw. einem Array von Objekten ermittelt.

Simpler Quotes-Generator mit Javascript und Dojo

VonCaucus 17. Juni 201427. Januar 2015

Das ist ein einfaches Beispiel für einen simplen Quotes-Generator mit Darstellung in einem Popup. Zur Darstellung und Popup verwenden wir html und Dojo 1.6. Auf Tastendruck soll das Popup mit einem random Quote erscheinen. Die Quotes halten wir in diesem einfachen Beispiel in einem Array. Nun wollen wir mittels Dojo-Connect die Funktion zum Generieren und Anzeigen des Quotes an das…

Installieren und Einbinden

Minimales Beispiel

Beispielanwendung mit AngularJS

Ähnliche Beiträge

Schreibe einen Kommentar Antworten abbrechen