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
}

Answer 1

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