web-dev-qa-db-fra.com

Fichier télécharger un tableau d'octets sous forme de fichier en javascript/Extjs

Dans ma solution Ext Js, j'appelle un service qui renvoie ce format JSON. 

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

Comment créer un dialogue de téléchargement de fichier avec le nom de fichier et le contenu du tableau d'octets (fichier)?

METTRE À JOUR

J'ai donc trouvé ce bit pour commencer le téléchargement

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)

Jusqu'ici, tout va bien

Mais le fichier que je reçois est corrompu, donc je suppose que j'ai besoin d'encoder/décoder la variable de fichier?

javascriptextjs3
12
Jepzen

Je devais convertir le fichier en Uint8Array avant de le transmettre au 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)

Lire cette réponse a beaucoup aidé https://stackoverflow.com/a/16245768/1016439

23
Jepzen

En me basant sur la réponse de Jepzen, j'ai pu utiliser cette technique pour télécharger un document à partir d'AWS S3 à partir du navigateur. +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);
      }
});

0
scoDubblT