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
}
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.
' { } ' used for Object and ' [] ' is used for Array in json.
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.
Once you have the bytes as a string, you can use the JSON. dumps method to convert the string object to JSON.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With