Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to receive a byte array inside a JSON

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
}
like image 699
user1294510 Avatar asked Jan 29 '19 02:01

user1294510


People also ask

Can you send byte array in JSON?

JSON does not support that. Use Base64. That is your library supporting it, not JSON itself. The byte array wont be stored as byte array in the JSON, JSON is a text format meant to be human readable.

What is [] and {} in JSON?

' { } ' used for Object and ' [] ' is used for Array in json.

Does JSON accept array?

Arrays in JSON are almost the same as arrays in JavaScript. In JSON, array values must be of type string, number, object, array, boolean or null. In JavaScript, array values can be all of the above, plus any other valid JavaScript expression, including functions, dates, and undefined.

Can you convert bytes to JSON?

Once you have the bytes as a string, you can use the JSON. dumps method to convert the string object to JSON.


1 Answers

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.

like image 112
Nik B Avatar answered Sep 20 '22 14:09

Nik B