jsPDF, express, and axios: addImage PNG getting corrupted

Question

I am generating a PDF in express/node using jspdf with a PNG image, then returning it to a front-end via axios. If I save it on the server side using fs.appendFile, it looks fine. However in my downloaded version from the front end the image is messed up. I know this somehow has to do with encoding either on the server end or the client end, but I just can't work it out. Any help is appreciated! Thanks!

Front end code:

axios
  .put('/api/open/print/plan/60abcdb1480b2a000acd4ce6', { responseType: 'arraybuffer' })
  .then(response => {
     let blob = new Blob(
       [response.data],
       { type: response.headers['Content-Type'] }
      )
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'tables2.pdf');
      document.body.appendChild(link);
      link.click();
    })

Server-side code:

const doc = new JsPDF('landscape')
const file = fs.readFileSync(path.join(path, 'logo-128x128.png')).toString('base64')
...
const totalPages = doc.internal.getNumberOfPages()
for (let i = 1; i <= totalPages; i++) {
  doc.addImage(file, "PNG", doc.internal.pageSize.getWidth() - 25.4, 5.08, 12.7, 12.7)
}
res.send(new Buffer.from(doc.output('arraybuffer')))

Good file on server side:

Bad file downloaded from front-end:

Answer 1

Node:

// send document output
const output = doc.output('arraybuffer')
const buffer = Buffer.from(output, 'ascii')
res.send(buffer)

And front-end, use responseType 'blob', then:

const blob = new Blob([res])
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')