10

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
}
1
  • 2
    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
    – anotherdev
    Commented Feb 12, 2019 at 9:55

3 Answers 3

12
+25

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

10

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.

1
  • 2
    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).
    – Kaiido
    Commented May 27, 2019 at 0:54
-1

Set the byte array value as string. When parsing the JSON convert the string into byte array.

reference this Java Byte Array to String to Byte Array for an example.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.