how to convert byte array to pdf and download

Question

I am trying to do a simple task of downloading a http response to a pdf. I am generating a pdf file but I am getting an error of "Failed to open PDF".

Here is what the response looks like.

And here is what I am doing.

 let blob = new Blob([response.data], { type: 'application/pdf' })
 FileSaver.saveAs(blob, 'foo.pdf')

The response there doesn't look like a PDF file (PDF is a text file and should start with `%PDF.`). Have you checked that XMLHttpRequest uses the correct URI? — , Aug 24 '17 at 17:00
I am not sure what it is. I am trying out different ways of displaying it. here is a fiddle i forked and added the response. Maybe this will help figure it out? — texas697, Aug 24 '17 at 17:02
Ah Ok, the string base-64 encoded. Simply decode it via f.ex. via fetch/XMLHttpRequest — , Aug 24 '17 at 17:04

score 7 · Accepted Answer · answered Aug 24 '17 at 17:06

The string from the response seem to be Base-64 encoded (ref. fiddle). You can decode it using fetch() (or XMLHttpRequest() for older browsers):

fetch("data:application/pdf;base64," + response.data)
  .then(function(resp) {return resp.blob()})
  .then(function(blob) {
    FileSaver.saveAs(blob, 'foo.pdf')
  });

score 1 · Answer 2 · edited Feb 05 '21 at 12:27

If anyone looking for solution with same problem, here is the nice article with cross browser support.

Snippet from article:

const binaryString = window.atob(fileResponseData);
const bytes = new Uint8Array(binaryString.length);
const mappedData = bytes.map((byte, i) => binaryString.charCodeAt(i));
const blob = new Blob([mappedData], { type: 'application/pdf' });
FileSaver.saveAs(blob, 'foo.pdf')

how to convert byte array to pdf and download

2 Answers2

Linked