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
}
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.