Download zip file returned from server in React

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, react, express, puppeteer, 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);
                });
            }));
        }

        const zipToSend = zip.toBuffer();

        response.json({ 
            message: 'Screenshots are done!\nPlease check the root directory you previously designated.',
            zipFile: zipToSend
        });
    })();
}); 

Via Active questions tagged javascript - Stack Overflow https://ift.tt/RIXwFcQ