Download zip file returned from server in React

Question

The app: I'm building an app that takes screenshots with puppeteer and returns them in a zip file to a react front end.

Relevant technologies: node, express, AdmZip

The issue: I can get the data to the point where it triggers the automatic download, but what gets downloaded does not appear to be a proper zip file as I get the following error when attempting to unzip: 'Unable to expand "screenshot-download.zip".

Extra context: To ensure things were working as expected in the process of actually compressing the screenshots into a zip file, I also implemented the "writeZip" method to create a zip file straight from the server and onto my local file system (bypassing converting to buffer and sending to client). This zip file worked as expected and had all the correct contents. This is leading me to believe that the issue is somewhere in the process of sending to client and converting it to something usable.

App.js code (front end):

fetch(`/dcsgrab?tearsheetUrl=${screenShotData}&imagefilelocation=${imageFileLocationData}`)
      .then((response) => response.json())
      .then((data) => {
        const zipBlob = new Blob(data.zipFile.data);
        const url = window.URL.createObjectURL(zipBlob);
        const zipDownload = document.createElement("a");

        setMessageData(data.message);
        setZipData(data.zipFile);

        zipDownload.href = url;
        zipDownload.download = "screenshot-download.zip";
        document.body.appendChild(zipDownload);
        zipDownload.click();
      });
  };

Console log values from returned data (top) and after it's converted to blob (bottom):

{message: 'Screenshots are done!\nPlease check the root directory you previously designated.', zipFile: {…}}
message: "Screenshots are done!\nPlease check the root directory you previously designated."
zipFile: {type: 'Buffer', data: Array(8207179)}
[[Prototype]]: Object

Blob {size: 21304601, type: ''}
size: 21304601
type: ""
[[Prototype]]: Blob

Server.js code (back end - large chunks of puppeteer code removed to make it easier to read through, if it seems necessary though I will add back in):

    app.get('/dcsgrab', (request, response) => {
        const zip = new AdmZip();
    
        (async () => {
    
          /**
           * Screenshot the creative elements on the current page
           * @return {Promise.<Array>} Promise which resolves with an array of clipping paths
           */
            async function getScreenShots() {
                const rects = await page.$$eval(PREVIEW_SELECTOR, iframes => {
                  return Array.from(iframes, (el) => {
                    const {x, y, width, height} = el.getBoundingClientRect();
    
                    return {
                      left: x,
                      top: y,
                      width,
                      height,
                      id: el.id,
                    };
                  });
                }, PREVIEW_SELECTOR).catch(e => {
                  console.error(e.message);
                });
    
                return Promise.all(rects.map(async (rect) => {
                  return await page.screenshot({
                    clip: {
                      x: rect.left,
                      y: rect.top,
                      width: rect.width,
                      height: rect.height,
                    },
                  }).then((content) => {
                    zip.addFile(`screenshot-${screenshotCounter++}.png`, Buffer.from(content, "utf8"), "entry comment goes here");
                    console.log(`${rect.id} element captured and store in zip`);
                  })
                    .catch((e) => {
                      console.error(e.message);
                    });
                }));
            }

            // Wait a bit then take screenshots
            await new Promise(resolve => setTimeout(resolve, DELAY_FOR_ANIMATION));
            await getScreenShots().catch((e) => console.error(e.message));

            // Continue taking screenshots till there are no pages left
            while (await isNextButtonActive()) {
              await getScreenShots().catch((e) => console.error(e.message));
            }

            await browser.close();
    
            const zipToSend = zip.toBuffer();
    
            response.json({ 
                message: 'Screenshots are done!\nPlease check the root directory you previously designated.',
                zipFile: zipToSend
            });
        })();
    }); 

Answer 1

The Blob contructor accepts an array of ArrayBuffers, TypedArrays, DataViews, Blobs or strings. You are providing an array of numbers. In this case the numbers get converted to strings and concatenated together.

Demonstration of the problem:

async function blob2string(blob) {
  return new TextDecoder().decode(await blob.arrayBuffer());
}

(async() => {
  const data = [84, 101, 115, 116]; // bytes for the string "Test"

  const wrong_blob = new Blob(data);
  const correct_blob = new Blob([new Uint8Array(data)]);

  console.log("Wrong:", wrong_blob.size, await blob2string(wrong_blob));
  console.log("Correct:", correct_blob.size, await blob2string(correct_blob));
})();

In your case you need to change

new Blob(data.zipFile.data);

to

new Blob([new Uint8Array(data.zipFile.data)]);

---

Note that sending a binary file as an array of numbers in JSON will expand the size of the data by 2 to 4 times of the original size.
In the previous example the 4 bytes would be 16 bytes as JSON.

I would recommend that the server just returns the zip data directly, so you can just use the URL directly on the link, instead going through fetch, blob and URL conversion.