Summary:

I have a list of HTML files that a user can download through the browser. I expect to be able to bundle these individual files into a single GZIP file and have a single download compared to the multiple files being download currently when multiple are selected.

Actual result is an error that I can not figure out how to resolve:

myExportUtility.js?678e:88 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
    at exportBundledFiles (myExportUtility.js?678e:88:1)

The functions being used are:

1. Function that takes raw HTML input and a file name and creates a blob to return.

const retrieveTextBlobs = (textToWrite, fileNameToSaveAs) => {
    const textFileAsBlob = new Blob([textToWrite], {type: fileType.HTML});
    return textFileAsBlob;
};

2. Takes the list of blobs and tries to shove it in a GZIP and turn into a download link.

const exportBundledFiles = (fileList) => {
    const gzipFile = createGzip(fileList);

    const downloadLink = document.createElement("a");
    console.log(downloadLink);
    console.log(gzipFile);
    downloadLink.href = window.webkitURL.createObjectURL(gzipFile);
};

These two functions are being used by a bulk export function:

    handleBulkExport = () => {
        let blobs = [];
        this.state.selectedHTMLDocs.forEach(doc => {
            const raw = new DOMParser().parseFromString(doc.template, "text/html");
            blobs.push(retrieveTextBlobs(raw.documentElement.textContent, `${doc.name}.html`));
        });
        exportBundledFiles(blobs);
    };

Output:

console.log(downloadLink) -> <a></a>

console.log(gzipFile) -> Gzip {_opts: Array(2), _chunkSize: 16384, _readableState: ReadableState, readable: true, _events: {…}, …}

I have tried to look at other questions, but all the questions are about different subject matter than trying to bulk download html blobs in a single gzip file.

Is there a way to do this in javascript? This is for a react application.