Convert Figma logo to code with AI

Stuk logojszip

Create, read and edit .zip files with Javascript

9,737
1,300
9,737
415

Top Related Projects

An HTML5 saveAs() FileSaver implementation

StreamSaver writes stream to the filesystem directly asynchronous

5,494

high speed zlib port to javascript, works in browser & node.js

3,387

JavaScript library to zip and unzip files supporting multi-core compression, compression streams, zip64, split files and encryption.

34,966

📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

Quick Overview

JSZip is a JavaScript library for creating, reading, and editing ZIP files directly in the browser or in Node.js. It provides a simple and intuitive API for working with ZIP archives, allowing developers to manipulate ZIP files without server-side processing.

Pros

  • Cross-platform compatibility (works in browsers and Node.js)
  • Easy-to-use API for creating and manipulating ZIP files
  • Supports various compression methods and file types
  • Active development and community support

Cons

  • Large file handling can be memory-intensive in browser environments
  • Limited support for encryption and advanced ZIP features
  • Performance may be slower compared to native ZIP utilities
  • Requires additional steps for saving generated ZIP files in browsers

Code Examples

Creating a new ZIP file and adding content:

const zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
const img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});

Reading contents from a ZIP file:

JSZip.loadAsync(zipData).then((zip) => {
  return zip.file("Hello.txt").async("string");
}).then((content) => {
  console.log(content); // "Hello World\n"
});

Generating a ZIP file and triggering download in browser:

zip.generateAsync({type:"blob"}).then((content) => {
  const url = URL.createObjectURL(content);
  const link = document.createElement("a");
  link.href = url;
  link.download = "archive.zip";
  link.click();
});

Getting Started

To use JSZip in your project, first install it via npm:

npm install jszip

Then, import and use it in your JavaScript code:

import JSZip from 'jszip';

const zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");

zip.generateAsync({type:"blob"}).then((content) => {
  // Use the generated ZIP file content
});

For browser usage, you can include JSZip via a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

Competitor Comparisons

An HTML5 saveAs() FileSaver implementation

Pros of FileSaver.js

  • Focused specifically on saving files, making it lightweight and easy to use
  • Supports a wide range of browsers and file types
  • Simple API with minimal setup required

Cons of FileSaver.js

  • Limited to file saving functionality only, unlike JSZip's comprehensive zip file handling
  • Doesn't provide compression or file manipulation capabilities
  • May require additional libraries for more complex file operations

Code Comparison

FileSaver.js:

import { saveAs } from 'file-saver';

const blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

JSZip:

import JSZip from 'jszip';

const zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
zip.generateAsync({type:"blob"})
   .then(function(content) {
       saveAs(content, "example.zip");
   });

FileSaver.js is ideal for simple file saving tasks, while JSZip offers more comprehensive zip file creation and manipulation capabilities. The choice between the two depends on the specific requirements of your project.

StreamSaver writes stream to the filesystem directly asynchronous

Pros of StreamSaver.js

  • Allows streaming of large files directly to disk, reducing memory usage
  • Supports saving files of unlimited size
  • Works well with progressive loading and real-time data generation

Cons of StreamSaver.js

  • Limited browser support (mainly modern browsers)
  • Requires a service worker setup for full functionality
  • More complex to implement compared to JSZip

Code Comparison

StreamSaver.js:

const fileStream = streamSaver.createWriteStream('filename.txt', {
  size: 22, // (optional) Will show progress
  writableStrategy: undefined, // (optional)
  readableStrategy: undefined  // (optional)
})

new Response('StreamSaver is awesome').body
  .pipeTo(fileStream)
  .then(success, error)

JSZip:

var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
zip.generateAsync({type:"blob"})
   .then(function(content) {
       saveAs(content, "example.zip");
   });

StreamSaver.js is designed for handling large files and streaming data directly to disk, making it suitable for applications dealing with substantial amounts of data or real-time data generation. However, it has more limited browser support and a more complex setup process.

JSZip, on the other hand, is simpler to use and has broader browser compatibility. It's better suited for creating and manipulating smaller zip files in memory, but may struggle with very large files due to memory constraints.

The choice between these libraries depends on the specific requirements of your project, such as file size, browser support needs, and the complexity of the data handling process.

5,494

high speed zlib port to javascript, works in browser & node.js

Pros of pako

  • Faster compression and decompression speeds
  • Smaller file size, optimized for browser usage
  • Supports additional compression algorithms (e.g., Deflate Raw)

Cons of pako

  • Limited file handling capabilities compared to jszip
  • Lacks built-in support for creating and managing ZIP archives
  • Fewer high-level utility functions for working with compressed data

Code Comparison

pako:

var pako = require('pako');
var input = new Uint8Array([1,2,3,4,5]);
var compressed = pako.deflate(input);
var decompressed = pako.inflate(compressed);

jszip:

var JSZip = require('jszip');
var zip = new JSZip();
zip.file("hello.txt", "Hello World\n");
zip.generateAsync({type:"uint8array"}).then(function(content) {
    // content is a Uint8Array containing the ZIP file
});

pako focuses on low-level compression and decompression operations, while jszip provides a higher-level API for working with ZIP archives. pako is more suitable for scenarios requiring raw compression, while jszip offers more comprehensive file handling and ZIP creation capabilities.

3,387

JavaScript library to zip and unzip files supporting multi-core compression, compression streams, zip64, split files and encryption.

Pros of zip.js

  • Native support for Web Workers, enabling better performance in browser environments
  • Implements streaming for handling large files more efficiently
  • Supports both synchronous and asynchronous operations

Cons of zip.js

  • Less comprehensive documentation compared to JSZip
  • Slightly more complex API, which may require a steeper learning curve
  • Fewer downloads and less community adoption than JSZip

Code Comparison

zip.js:

zip.createWriter(new zip.BlobWriter(), function(writer) {
  writer.add("file.txt", new zip.TextReader("Hello World!"), function() {
    writer.close(function(blob) {
      // blob contains the zip file as a Blob object
    });
  });
});

JSZip:

var zip = new JSZip();
zip.file("file.txt", "Hello World!");
zip.generateAsync({type:"blob"})
.then(function(blob) {
    // blob contains the zip file as a Blob object
});

Both libraries allow for creating zip files with similar ease, but zip.js uses a callback-based approach, while JSZip leverages Promises for asynchronous operations. JSZip's API is generally more straightforward, making it easier for beginners to use. However, zip.js offers more advanced features like streaming and Web Worker support, which can be beneficial for complex use cases or when dealing with large files in browser environments.

34,966

📗 SheetJS Spreadsheet Data Toolkit -- New home https://git.sheetjs.com/SheetJS/sheetjs

Pros of SheetJS

  • Comprehensive support for various spreadsheet formats (XLS, XLSX, CSV, etc.)
  • Robust parsing and writing capabilities for complex spreadsheet data
  • Extensive documentation and community support

Cons of SheetJS

  • Larger file size and potentially higher memory usage
  • Steeper learning curve due to more complex API
  • Some advanced features require a commercial license

Code Comparison

SheetJS:

import * as XLSX from 'xlsx';

const workbook = XLSX.readFile('example.xlsx');
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(worksheet);

JSZip:

import JSZip from 'jszip';

const zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
zip.generateAsync({type:"blob"}).then(function(content) {
    // use the content...
});

Key Differences

  • SheetJS focuses on spreadsheet manipulation, while JSZip is a general-purpose ZIP file utility
  • SheetJS offers more specialized features for working with spreadsheet data
  • JSZip provides a simpler API for basic ZIP file operations
  • SheetJS has a larger community and more frequent updates
  • JSZip is more lightweight and easier to integrate for simple ZIP-related tasks

Both libraries serve different purposes, with SheetJS being the better choice for complex spreadsheet operations and JSZip for basic ZIP file handling.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

JSZip

A library for creating, reading and editing .zip files with JavaScript, with a lovely and simple API.

See https://stuk.github.io/jszip for all the documentation.

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, "example.zip");
});

/*
Results in a zip containing
Hello.txt
images/
    smile.gif
*/

License

JSZip is dual-licensed. You may use it under the MIT license or the GPLv3 license. See LICENSE.markdown.

NPM DownloadsLast 30 Days