How do I create a zip file using ReactJS?

// plain

Creating a zip file using ReactJS is possible using the jszip library.

To create a zip file, first install the library via npm:

npm install jszip

Then, you can import the library into your React component:

import JSZip from 'jszip';

Next, you can create a new Zip object and add files to it:

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

Finally, you can generate the zip file and save it to disk:

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

This code will create a zip file named example.zip and save it to the user's device.

Parts of the code:

npm install jszip: Installs the jszip library.
import JSZip from 'jszip': Imports the library into the React component.
let zip = new JSZip(): Creates a new Zip object.
zip.file("Hello.txt", "Hello World\n"): Adds a file named Hello.txt with contents Hello World\n to the Zip object.
zip.generateAsync({type:"blob"}): Generates the zip file.
saveAs(blob, "example.zip"): Saves the zip file to the user's device.

Helpful links