Use the base64 preview of the binary data response (zip file) in angularjs

Question

I always get this error in the downloaded zip file C:\Users\me\Downloads\test.zip: Unexpected end of archive

My current code is:

var blob = new Blob([data], { // data here is the binary content
    type: 'octet/stream',
});
var zipUrl = window.URL.createObjectURL(blob);
var fileName = orderNo;
fileName += '.zip';
downloadFile(null, fileName, null, zipUrl, null); // just creates a hidden anchor tag and triggers the download

The response of the call is a binary (I think). Binary Content Here

But the preview is a base64. Base64 Content. And it is the correct one. The way I verify it is by using this fiddle.

You can refer to the screenshot of the network here

I put the base64 content in this line var sampleBytes = base64ToArrayBuffer(''); And the zip downloaded just opens fine.

Things I have tried so far.

1. Adding this headers to the GET call

   var headers = { Accept: 'application/octet-stream', responseType: 'blob', }; But I get Request header field responseType is not allowed by Access-Control-Allow-Headers in preflight response.

We're using an already ajax.service.js in our AngularJS project.

2. From this answer

var blob = new Blob([yourBinaryDataAsAnArrayOrAsAString], {type: "application/octet-stream"}); var fileName = "myFileName.myExtension"; saveAs(blob, fileName);

There are other things that I have tried that I have not listed. I will edit the questions once I find them again

But where I'm current at right now. The preview is correct base64 of the binary file. Is it possible to use that instead of the binary? (If it is I will not find the other methods that I've tested) I tried some binary to base64 converters but they don't work.

Answer 1

So I just went and ditched using the ajax.service.js, that we have, for this specific call.

I used the xhr snippet from this answer. I just added the headers necessary for our call: tokens and auth stuff.

And I used this code snippet for the conversion thing.

And the code looks like this:

fetchBlob(url, function (blob) {
    // Array buffer to Base64:
    var base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(blob)));
    var blob = new Blob([base64ToArrayBuffer(base64)], {
        type: 'octet/stream',
    });
    var zipUrl = window.URL.createObjectURL(blob);
    var fileName = orderNo;
    fileName += ' Attachments ';
    fileName += moment().format('DD-MMM-YYYY');
    fileName += '.zip';
    downloadFile(null, fileName, null, zipUrl, null); // create a hidden anchor tag and trigger download
});

function fetchBlob(uri, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', uri, true);
    xhr.responseType = 'arraybuffer';
    var x = AjaxService.getAuthHeaders();
    xhr.setRequestHeader('auth_stuff', x['auth_stuff']);
    xhr.setRequestHeader('token_stuff', x['token_stuff']);
    xhr.setRequestHeader('Accept', 'application/octet-stream');

    xhr.onload = function (e) {
        if (this.status == 200) {
            var blob = this.response;
            if (callback) {
                callback(blob);
            }
        }
    };

    return xhr.send();
};

function base64ToArrayBuffer(base64) {
    var binaryString = window.atob(base64);
    var binaryLen = binaryString.length;
    var bytes = new Uint8Array(binaryLen);
    for (var i = 0; i < binaryLen; i++) {
        var ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
    };

    return bytes;
}