How to receive a byte array inside a JSON

Question

I'm trying to receive a PDF from server that will be wrapped inside a JSON.

If I am only sending a byte array of the pdf to the front-end, I can read it properly by setting responseType to arraybuffer, then I can download the PDF by:

var blob = new Blob([data], { type: application/pdf});
    if ($window.navigator && $window.navigator.msSaveOrOpenBlob) {
        $window.navigator.msSaveOrOpenBlob(blob);
    } else {
        var a = document.createElement("a");
        document.body.appendChild(a);
        var fileURL = URL.createObjectURL(blob);
        a.href = fileURL;
        a.download = fileName;
        a.click();
    }
}

However when the server tries to send JSON with the bytearray inside, if I set the responseType to JSON, then I wont be able to convert the blob. But if I set responseType to arrayBuffer, I will get an Array of arrayBuffer, how do I convert it to JSON while still be able to extract the PDF afterward:

The JSON I'm receiving is in the form:

{
  result: true,
  value: <the pdf byte array>,
  errorMessage: null
}

Solution 1

You should convert bytes to base64 String and on UI read bytes from it.

Solution 2

If the below variable is assumed to represent the structure of responseText:

responseText = {
      result: true,
      value: <the pdf byte array>,
      errorMessage: null
}

responseText.value is the byte array. If the byte array is already typed as Uint8Array then this would work.

(Note: Other Typed Arrays exist, so choose which ever one suits your case best):

var blob = new Blob([response.value], { type: 'application/pdf'});
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(blob);
} else {
    var a = document.createElement("a");
    document.body.appendChild(a);
    var fileURL = URL.createObjectURL(blob);
    a.href = fileURL;
    a.download = 'test';//filename
    a.click();
}

However, if there is a string array, or integer array, of bytes like below:

responseText.value = [145, 229, 216, 110, 3]

and it needs to be converted to a typed byte array, then the below would work:

var ba = new Uint8Array(responseText.value);

or

var ba = new Uint8Array([145, 229, 216, 110, 3]);

Therefore,

var blob = new Blob([ba], { type: 'application/pdf'}); 

This way the byte array can be used to create a blob, so the file is downloaded when the click event fires.

Comments

[Pierre Emmanuel Lallemant]

JSON isn't designed for binary content. You have to use a string format, so you have to encode the binary into a string format, and decode it after to make it back into a binary. I highly recommend you to use base64 as answered by Petr Averyanov

[Kaiido]

Not that this answer says anything wrong in itself, but I hope nobody does this. If we take the exact example in this answer, then the binary data is actually only 5 bytes. Representing it as an Array of Uint8 converted to a string encoded as UTF-8, we now have a 23 bytes payload (~336% bigger). The base64 equivalent, (keXYbgM=) even with optional padding is only 8 bytes (~36% bigger than original).