2.3.1 • Public • Published


This package is based on a fork of v2.0.1 of https://www.npmjs.com/package/downzip

It adds an optional fourth parameter to the downzip method. That parameter is an object that may contain any of the following:

  • fetchInit: An async/sync function returning the init object to be used with the fetch operation used for the download of individual files added to the zip archive
  • responseHeaders: An object of headers to use in the zip response. This overrides/adds to the headers that downzip sends automatically. For example, setting this to { 'content-type': 'application/zip' } will result in the response containing a content-type header of 'application/zip' (the default is 'application/octet-stream'), with the content-disposition and content-length headers remaining as downzip determines.
  • onProgress: A callback that takes a progress object of the form { id, file, progFile, progFileset, progTotal, done }
  • onError: A callback that takes an error object of the form { id, file, error }

For example, to set the Authorization header for each file download and override the default Content-Type response header:

const downZip = new DownZip()
const url = await downZip.downzip(
      uuidv4(), // download id
      'zipfile', // name of zip file
      filesToZip, // array of files to add to zip
        fetchInit: () => ({ headers: { Authorization: `Bearer ${getAccessToken()}` } }),
        responseHeaders: { 'Content-Type': 'application/zip' }


  1. fetchInit can be a simple object if its value never changes.
  2. The merge of responseHeaders with the default headers is case-insensitive with respect to header names, e.g. passing { 'content-type': 'application/zip' } has the same result as passing { 'Content-Type': 'application/zip' }, that is, it will override the default 'Content-Type' header.


Maintainability Test Coverage

The package.json description says it all: "Library to enable client-side code to stream potentially large files into a zipped download"


  • Client-side generation of ZIP files from supplied single-file download URLs
  • Support for ZIP64 (ZIP files bigger than 4GB)
  • Everything is streamed, no data has to be held in RAM
  • No compression is applied, so the CPU load is tiny


  1. Install npm package: npm install downzip
  2. Make sure the service worker is copied to your output directory. For example, setup copy-webpack-plugin to put the service worker in your output directory:
// Add copy rule for downzip service worker
new CopyPlugin([
        from: 'node_modules/downzip/dist/downzip-sw.js',
        to: '.'

Example usage

import DownZip from 'downzip'

// Setup downzip object
const downZip = new DownZip()
await downZip.register()

// Initialize download
const downloadId = "aaaabbbb"
const zipFileName = "downzip-file"
const files = [
        name: 'picture1.jpg' 
        downloadUrl: 'http://your-download-url.com/picture1.jpg'
        size: 1234      // In bytes
        name: 'picture2.jpg' 
        downloadUrl: 'http://your-download-url.com/picture2.jpg'
        size: 4567      // In bytes
const downloadUrl = await downZip.downzip(

// Start download when user clicks the link
<a href={downloadUrl}>Click to start downloading!</a>

service-worker-loader options

Can pass mapScriptUrl function to the register method. That function gets used by service-worker-loader. docs

    const mapScriptUrl = scriptUrl => scriptUrl.replace('localhost', "")

   // Setup downzip object
    const downZip = new DownZip()
    await downZip.register({ mapScriptUrl })


All improvements are welcome, but the main things that need to be improved at the moment are:

  • Automated Testing
  • Only send the keep-alive service worker message when there is a download queued up / in progress
  • Find an easier way to install this package / service worker in projects

Please submit pull requests, I'm more than happy to merge in improvements!

Package Sidebar


npm i @dziegelbein/downzip

Weekly Downloads






Unpacked Size

1.3 MB

Total Files


Last publish


  • dziegelbein