Just keep calling zip.file().
Look at the example from their documentation page (comments mine):
var zip = new JSZip();
// Add a text file with the contents "Hello World\n"
zip.file("Hello.txt", "Hello World\n");
// Add a another text file with the contents "Goodbye, cruel world\n"
zip.file("Goodbye.txt", "Goodbye, cruel world\n");
// Add a folder named "images"
var img = zip.folder("images");
// Add a file named "smile.gif" to that folder, from some Base64 data
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"base64"}).then(function (content) {
location.href="data:application/zip;base64," + content;
});
The important thing is to understand the code you've written - learn what each line does. If you do this, you'd realize that you just need to call zip.file() again to add another file.
Stuk
stuk.github.io › jszip › documentation › examples.html
How to use JSZip
They return the current JSZip instance so you can chain the calls. // create a file zip.file("hello.txt", "Hello[p my)6cxsw2q"); // oops, cat on keyboard.
GitHub
github.com › Stuk › jszip
GitHub - Stuk/jszip: Create, read and edit .zip files with Javascript · GitHub
const zip = new JSZip(); zip.file("Hello.txt", "Hello World\n"); const img = zip.folder("images"); img.file("smile.gif", imgData, {base64: true}); zip.generateAsync({type:"blob"}).then(function(content) { // see FileSaver.js saveAs(content, ...
Starred by 10.3K users
Forked by 1.3K users
Languages JavaScript 97.3% | HTML 2.7%
Videos
03:21
Extract Zip Files With JavaScript JSZip | JavaScript Unzip Zip ...
02:52
Zip Files JavaScript | Create Zip From Uploaded Files With JavaScript ...
13:24
Easily Zip Files in React - YouTube
04:01
How to Create ZIP Files in Javascript Using JSZIP Library and ...
03:14
JSZip Jump Start - YouTube
Stuk
stuk.github.io › jszip
JSZip
Create .zip files using JavaScript. Provides a simple API to place any content generated by JavaScript into a .zip file for your users.
npm
npmjs.com › package › jszip
jszip - npm
August 2, 2022 - const zip = new JSZip(); zip.file("Hello.txt", "Hello World\n"); const img = zip.folder("images"); img.file("smile.gif", imgData, {base64: true}); zip.generateAsync({type:"blob"}).then(function(content) { // see FileSaver.js saveAs(content, ...
» npm install jszip
Published Aug 02, 2022
Version 3.10.1
Author Stuart Knightley
Repository https://github.com/Stuk/jszip
Homepage https://github.com/Stuk/jszip#readme
Top answer 1 of 4
23
Just keep calling zip.file().
Look at the example from their documentation page (comments mine):
var zip = new JSZip();
// Add a text file with the contents "Hello World\n"
zip.file("Hello.txt", "Hello World\n");
// Add a another text file with the contents "Goodbye, cruel world\n"
zip.file("Goodbye.txt", "Goodbye, cruel world\n");
// Add a folder named "images"
var img = zip.folder("images");
// Add a file named "smile.gif" to that folder, from some Base64 data
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"base64"}).then(function (content) {
location.href="data:application/zip;base64," + content;
});
The important thing is to understand the code you've written - learn what each line does. If you do this, you'd realize that you just need to call zip.file() again to add another file.
2 of 4
3
Adding to @Jonathon Reinhart answer,
You could also set both file name and path at the same time
// create a file and a folder
zip.file("nested/hello.txt", "Hello World\n");
// same as
zip.folder("nested").file("hello.txt", "Hello World\n");
Stuk
stuk.github.io › jszip › documentation › api_jszip › file_data.html
file(name, data [,options])
var zip = new JSZip(); // here, we have a correct (unicode) string zip.file("hello.txt", "unicode ♥", {binary: false}); // here, we have a binary string: it can contain binary content, one byte // per character. zip.file("hello.txt", "unicode \xE2\x99\xA5", {binary: true}); If you use a library ...
Stuk
stuk.github.io › jszip › documentation › examples › download-zip-file.html
Download the generated zip file
"use strict"; var zip = new JSZip(); zip.file("Hello.txt", "Hello world\n"); jQuery("#data_uri").on("click", function () { zip.generateAsync({type:"base64"}).then(function (base64) { window.location = "data:application/zip;base64," + base64; }, function (err) { jQuery("#data_uri").text(err); }); });
Stuk
stuk.github.io › jszip › documentation › howto › write_zip.html
How to write a file / give it to the user
var fs = require("fs"); var JSZip = require("jszip"); var zip = new JSZip(); // zip.file("file", content); // ...
Snyk
snyk.io › advisor › jszip › jszip code examples
Top 5 jszip Code Examples | Snyk
// 0.000001 & friends prevent divisions by 0. var promise = new JSZip.external.Promise(function (resolve, reject) { JSZipUtils.getBinaryContent("../" + chosenAnim["anim"], function (err, data) { if (err) { reject(err); } else { resolve(data); } }); }); promise.then(JSZip.loadAsync) .then(function (zip) { console.log(zip); return zip.catch.toString(); //return zip.file("anim.json").async("string"); })
Stuk
stuk.github.io › jszip › documentation › howto › read_zip.html
How to read a file
If possible, download the file as a Buffer (you will get better performances). If it’s not possible, you can fallback to a binary string (the option is likely to be encoding : "binary"). "use strict"; var http = require("http"); var url = require("url"); var JSZip = require("jszip"); var req = http.get(url.parse("http://localhost/.../file.zip"), function (res) { if (res.statusCode !== 200) { console.log(res.statusCode); // handle error return; } var data = [], dataLen = 0; // don't set the encoding, it will break everything !
Stuk
stuk.github.io › jszip › documentation › api_jszip › file_name.html
file(name)
var zip = new JSZip(); zip.file("file.txt", "content"); zip.file("file.txt").name // "file.txt" zip.file("file.txt").async("string") // a promise of "content" zip.file("file.txt").dir // false // utf8 example var zip = new JSZip(); zip.file("amount.txt", "€15"); zip.file("amount.txt").as...
YouTube
youtube.com › watch
Javascript JSZip Example to Compress Multiple Files Using HTML5 Form & Download it as ZIP File - YouTube
Buy the full source code of application here:https://procodestore.com/index.php/product/javascript-jszip-example-to-compress-multiple-files-using-html5-form-...
Published December 24, 2022
Stuk
stuk.github.io › jszip › documentation › api_jszip.html
JSZip API
Create .zip files using JavaScript. Provides a simple API to place any content generated by JavaScript into a .zip file for your users.
Snyk
snyk.io › advisor › jszip › functions › jszip
How to use the jszip function in jszip | Snyk
function createZipFile(siteId, site, user, images, imagesData) { /* Creating the zip file */ const zip = new JSZip(); const www = zip.folder('www'); /* Generate index.html file */ www.file('index.html', indexHtml); /* Generate config.xml file */ const configParams = { appId: generateAppId(...
Heltschl
heltschl.org › _js › jszip
JSZip: JavaScript zip class
If set, specifies the file compression method to use. If not, the default file compression is used, cf generate(options). optimizedBinaryString (boolean), default false. Set it to true if (and only if) the input is a string and has already been prepared with a 0xFF mask. ... A JSZip object, for chaining.
Cjoshmartin
cjoshmartin.com › blog › creating-zip-files-with-javascript
Generating ZIP Files with Javascript - Blog - Josh Martin's Website
June 4, 2024 - 1async function GenerateZipDownload() { 2 const imageDownload = "https://unsplash.com/photos/two-people-in-scuba-gear-swimming-in-the-ocean-SuGTwrtPCg4"; 3 const file = await fetch(imageDownload).then(r => r.blob()); 4 5 const zip = new JSZip(); 6 zip.file(`filename.jpg`, file); // adds the image file to the zip file 7 8 const zipData = await zip.generateAsync({ 9 type: "blob", 10 streamFiles: true 11 }) 12 const link = document.createElement('a'); 13 link.href = window.URL.createObjectURL(zipData); 14 link.download = `scuba-gear-swimming-data.zip` 15 link.click(); 16}
Stuk
stuk.github.io › jszip › documentation › api_jszip › folder_name.html
folder(name)
... zip.folder("images"); zip.folder("css").file("style.css", "body {background: #FF0000}"); // or specify an absolute path (using forward slashes) zip.file("css/font.css", "body {font-family: sans-serif}") // result : images/, css/, css/style.css, css/font.css
David Walsh
davidwalsh.name › javascript-zip
Create Zip Files with JavaScript
August 29, 2017 - While we're doing amazing things with JavaScript on the server side, it's important not to take our eyes off of some of the great stuff happening on the client side. One such awesome project I recently discovered was JSZip: a JavaScript library that allows you to easily generate ZIP files from ...