File download a byte array as a file in javascript / Extjs

Question

In my Ext Js solution I am calling a service which is returning this JSON format

{"success":true,"filename":"spreadsheet.xlsx","file":[80,75,3,4,20,0,...(many more)]}

How can I make a file download dialog with the filename and the content of the byte array (file) ?

UPDATE

So I found this bit to start the downlaod

var a = window.document.createElement('a');
                    a.href = window.URL.createObjectURL(new Blob(data.file, { type: 'application/octet-stream' }));
                    a.download = data.filename;

                    // Append anchor to body.
                    document.body.appendChild(a)
                    a.click();

                    // Remove anchor from body
                    document.body.removeChild(a)

So far good

But the file I get is corrupted so I suspect I need to Encode/Decode the file variable?

Have a look: http://stackoverflow.com/questions/1801076/renaming-files-when-downloading-it/16993368#16993368 — RienNeVaPlu͢s, Jan 14 '15 at 15:17

score 36 · Accepted Answer · edited May 23 '17 at 12:25

36

I had to convert the file into a Uint8Array before passing it to the Blob

var arr = data.file;
var byteArray = new Uint8Array(arr);
var a = window.document.createElement('a');

a.href = window.URL.createObjectURL(new Blob([byteArray], { type: 'application/octet-stream' }));
a.download = data.filename;

// Append anchor to body.
document.body.appendChild(a)
a.click();


// Remove anchor from body
document.body.removeChild(a)

Reading this answer helped a lot https://stackoverflow.com/a/16245768/1016439

edited May 23 '17 at 12:25

Community

1
1

answered Jan 15 '15 at 12:50

Jepzen

2,942
6
40
62

I spent quite a bit time on this with wrong encoding. Thanks for the solution. I was using Uint16Array – BetterLateThanNever Mar 23 '17 at 19:12
Also look here: https://stackoverflow.com/questions/12676649/javascript-programmatically-trigger-file-download-in-firefox – Jepzen Jul 06 '20 at 10:58

score 2 · Answer 2 · answered Feb 01 '18 at 18:35

Building on Jepzen's response, I was able to use this technique to download a document from AWS S3 from within the browser. +1 Jepzen

s3.getObject(params, function(err, data) {
      if (err === null) {
         var arr = data.Body;
         var byteArray = new Uint8Array(arr);
         var a = window.document.createElement('a');

         a.href = window.URL.createObjectURL(new Blob([byteArray], { type: 'application/octet-stream' }));
         a.download = fName; //fName was the file name portion of the key what was passed in as part of the key value within params. 

         // Append anchor to body.
         document.body.appendChild(a)
         a.click();

         // Remove anchor from body
         document.body.removeChild(a)
      } else {
        result = 'failure'
         console.log("Failed to retrieve an object: " + err);
      }
});

score 0 · Answer 3 · answered May 29 '23 at 08:07

The below solution worked for me:

var date = new Date();
var filename = "Orders_ProductDetails_" + "_" +
    date.getFullYear() +
    "." +
    date.getDate() + "." +
    (date.getMonth() + 1);

const url = window.URL.createObjectURL(response); // here response = api res converted to blob like res.blob()
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
// the filename you want
a.download = filename+'.xlsx';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);

File download a byte array as a file in javascript / Extjs

3 Answers3

Linked