To open a ZIP in a browser, load JSZip, pass the selected file to JSZip.loadAsync(file), then read the archive entry you need with its async() method. You can also create a ZIP in the browser with generateAsync({ type: 'blob' }) and offer the resulting Blob as a download. The official JSZip homepage displayed version 3.10.2 when checked on October 4, 2026; check the project documentation for the current release and browser details.
Load JSZip in your browser project
JSZip is a JavaScript library for creating, reading, and editing ZIP archives. You can use it through a project bundler or load its browser distribution. The project lists dist/jszip.js and dist/jszip.min.js; in an unbundled page, the library is available as the global JSZip. See the JSZip homepage and its examples for the project’s installation options and example setup.
As an Amazon Associate I earn from qualifying purchases.
Open a ZIP file selected by the user
Read the File from a file input and pass it directly to JSZip.loadAsync(). You do not need to convert it with FileReader first: JSZip accepts Blob input, and a browser File inherits from Blob. The loader also accepts an ArrayBuffer, Uint8Array, or Promise that resolves to a supported input.
Recommended Free Tools
async function openZip(file) {
return JSZip.loadAsync(file);
}
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async () => {
const file = input.files?.[0];
if (!file) return;
try {
const zip = await openZip(file);
console.log(Object.keys(zip.files));
} catch (error) {
console.error('Could not open this ZIP file:', error);
}
});In a real interface, replace the console output with a file list and a clear message when the archive cannot be opened. Because loading is asynchronous, wait for the returned Promise before inspecting entries. The accepted input types and loading behavior are documented in the loadAsync API reference.
#1 Best Overall
Inspect entries and extract the one you need
The result of loadAsync() is a JSZip object whose files property contains archive entries. To read a known entry, call zip.file(name); it returns an entry or null if no matching file exists. Then call the entry’s async(type) method and await the result.
Read a text entry
async function readTextFileFromZip(file, entryName) {
const zip = await JSZip.loadAsync(file);
const entry = zip.file(entryName);
if (!entry) throw new Error(`Entry not found: ${entryName}`);
return entry.async('string');
}Use 'string' for text that should be decoded as UTF-8. If the file uses another character encoding, read it as bytes and decode it with a suitable library. ZIP filenames can also use encodings other than UTF-8; JSZip’s native filename support is UTF-8, and loadAsync() provides a decodeFileName option for custom filename decoding.
Rank #2
Read a binary entry
For images, PDFs, and other binary content, use a byte-oriented output such as 'uint8array' rather than a text string. JSZip also documents Blob and ArrayBuffer output where supported. Check JSZip.support before relying on a particular output type in a target browser. The available entry output types are listed in the entry async API reference.
Free tools Windows power users keep installed
One-click scans. No signup required.
const bytes = await entry.async('uint8array');Entries are read on demand, so an interface can show the archive’s file list first and read selected content as needed. The bytes or text returned by async() are still held in memory; this approach does not make large archives memory-free.
Create a ZIP file for download
Create or update entries with .file(name, data); use .folder(name) when you want to organize entries under a folder. Then generate a browser Blob and pass it to a download helper such as FileSaver’s saveAs().
async function makeZipDownload(zip, saveAs) {
const blob = await zip.generateAsync({ type: 'blob' });
saveAs(blob, 'result.zip');
}For a project using FileSaver, the basic flow is to import or load saveAs, then call the function with the generated Blob and a filename. JSZip documents output types and options in the generateAsync API reference; FileSaver documents browser-side saving in its project repository.
Rank #4
Choose the output type and compression
A Blob is a practical output for a browser download. JSZip also supports output such as arraybuffer and uint8array when the browser supports it; consult JSZip.support if your application needs a particular representation.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesGeneration supports STORE (no compression) and DEFLATE. DEFLATE levels 1 through 9 offer a speed-versus-compression trade-off. Already-compressed entries may be reused, so selecting a different generation compression level does not guarantee that every entry will be recompressed. See the generation options for the API details.
Handle errors and archive limits
Both loading and generation are Promise-based. Catch failures and surface an actionable message rather than leaving the user with an unresponsive-looking interface.
- Invalid or unsupported archive: JSZip supports classic ZIP files, but does not support encrypted or multi-volume archives. ZIP64 support also has limits when very large 64-bit sizes exceed what JavaScript number and bitwise handling can safely process.
- Memory pressure or slow processing: JSZip’s documentation says that
async()andgenerateAsync()hold the full result in memory, though they do not freeze the browser as synchronous processing can. Archive size, browser, and device affect performance; the documentation does not establish a universal safe file-size limit. Test realistic archives on the devices your application supports and set limits appropriate to your use case. - Unexpected filenames or paths: Since JSZip 3.8.0,
loadAsync()sanitizes relative path components in entry names to mitigate zip-slip paths and records the original name inunsafeOriginalName. Treat entry names as untrusted if your application later writes files to a filesystem or uses paths beyond the archive object. - Changed archive after reading and regenerating: A generated ZIP is not guaranteed to be byte-for-byte identical to the input. JSZip may discard metadata or add folder records during the round trip.
These limitations are described in the project’s limitations documentation and loadAsync API reference. Make error handling part of the file-selection and download flows, not just an exception in the developer console.
Quick Recap
Choose the right input and output for the job
| Need | Suitable choice | Why |
|---|---|---|
| Open a file chosen in a file picker | File or Blob |
Pass it directly to loadAsync(); a FileReader conversion is unnecessary. |
| Load bytes already provided by another API | ArrayBuffer or Uint8Array |
These are accepted inputs when your code already has the archive bytes. |
| Read known text content | 'string' |
Convenient UTF-8 text result; use bytes and a decoder for other encodings. |
| Read binary content | 'uint8array' or another supported byte/buffer type |
Avoids treating arbitrary binary data as text; verify browser support as needed. |
| Offer a ZIP download | { type: 'blob' } |
Produces a browser Blob that can be handed to a download helper. |
Practical implementation checklist
- Choose a project bundler or include the JSZip browser distribution and confirm the expected
JSZipsymbol is available. - Pass the selected
FiletoloadAsync(), then handle its Promise rejection. - Check whether the requested entry exists before calling its
async()method. - Use strings for UTF-8 text and bytes for binary or differently encoded data.
- Check output-type support and keep memory use in mind for both extraction and generation.
- For ZIP creation, generate a Blob and send it to an appropriate browser download mechanism.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
