this line of code worked for me var blob = new Blob([new Uint8Array(BYTEARRAY)], { type: 'video/mp4' });

There is probably an easier way to do this, but this works in IE and Chrome.

1. First, I converted the byte array to base64.
2. Next I converted the base64 to a Uint8Array.
3. Then I display the file.

Here is the code that worked for me:

    lwsService.getdocument(id)
    .success(function (response) {
       var byteArray = new Uint8Array(response[0].binFileImage);
       var blob = new Blob([byteArray], { type: 'application/pdf' });
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob);
        } else {
          var objectUrl = URL.createObjectURL(blob);
          window.open(objectUrl);
        }

I hope this helps someone else.

Try this to get the Blob

function base64toBlob(base64Data, contentType) {
    var sliceSize = 1024;
    var byteCharacters = atob(base64Data);
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);
    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);
        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

I ended up doing this with the fileContent string:

let bytes = new Uint8Array(fileContent.length);

for (let i = 0; i < bytes.length; i++) {
    bytes[i] = fileContent.charCodeAt(i);
}

I then proceed to build the Blob with these bytes:

let blob = new Blob([bytes], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' });

If I then send this via a POST request, the file isn't mangled and can be opened correctly by Word.

I still get the feeling this can be achieved with less hassle / less steps. If anyone has a better solution, I'd be very interested to learn.

Your code returning byte array to JavaScript and you don't need to do that, just return it as FileContentResult which will write a binary file to the response and the browser will download it as a file even if you call the API directly in the browser.

[HttpGet]
[Route("Download")]
public async Task<ActionResult> DownloadFiles(int fileDocumentId)
{
    string filePath = fileDocumentId=11;

    var file = await _fileService.FetchFiles(fileDocumentId);
    string fileName = "FileName" + DateTime.Now.ToString() + ".pdf";

    return File(file.ArchiveData, "application/force-download", fileName);
}

You can use FileReader to read the Blob as an ArrayBuffer.

Here's a short example:

var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function(event) {
    arrayBuffer = event.target.result;
};
fileReader.readAsArrayBuffer(blob);

Here's a longer example:

// ArrayBuffer -> Blob
var uint8Array  = new Uint8Array([1, 2, 3]);
var arrayBuffer = uint8Array.buffer;
var blob        = new Blob([arrayBuffer]);

// Blob -> ArrayBuffer
var uint8ArrayNew  = null;
var arrayBufferNew = null;
var fileReader     = new FileReader();
fileReader.onload  = function(event) {
    arrayBufferNew = event.target.result;
    uint8ArrayNew  = new Uint8Array(arrayBufferNew);

    // warn if read values are not the same as the original values
    // arrayEqual from: http://stackoverflow.com/questions/3115982/how-to-check-javascript-array-equals
    function arrayEqual(a, b) { return !(a<b || b<a); };
    if (arrayBufferNew.byteLength !== arrayBuffer.byteLength) // should be 3
        console.warn("ArrayBuffer byteLength does not match");
    if (arrayEqual(uint8ArrayNew, uint8Array) !== true) // should be [1,2,3]
        console.warn("Uint8Array does not match");
};
fileReader.readAsArrayBuffer(blob);
fileReader.result; // also accessible this way once the blob has been read

This was tested out in the console of Chrome 27—69, Firefox 20—60, and Safari 6—11.

Here's also a live demonstration which you can play with: https://jsfiddle.net/potatosalad/FbaM6/

Update 2018-06-23: Thanks to Klaus Klein for the tip about event.target.result versus this.result

Reference:

• https://developer.mozilla.org/en-US/docs/Web/API/FileReader#readAsArrayBuffer()
• https://www.w3.org/TR/FileAPI/#dfn-readAsArrayBuffer

I managed to achieved this, and it might not be the suitable way, but I'm posting it here in case someone else might find it useful.

What I have is a blob URL, and

var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';

xhr.onload = function() {
    var recoveredBlob = xhr.response;
    const reader = new FileReader();
    // This fires after the blob has been read/loaded.
    reader.addEventListener('loadend', (e) => {
        blob =  new Uint8Array(e.target.result);
        // calling the save method
    });
    // Start reading the blob as text.
    reader.readAsArrayBuffer(recoveredBlob);
};
// get the blob through blob url 
xhr.open('GET', blobUrl_);
xhr.send();

Also, I had to do a modification to my jQuery service call; I had to add processData: false , otherwise, passing the array will be processed, and in my case, the service failed to de-serialize it.

$.ajax({
    type: 'PATCH',
    url: url_,
    contentType: 'application/octet-stream',   
    data: blob,
    processData: false,
    headers: {
        "If-Match": newEtag,
        "X-XSRF-TOKEN": xsrfSessionCookie,
    },
    success: function (res) {
        // do something 
    } 
});

Cheers