Beschädigter Download in AngularJs App

Question

Ich versuche, eine Datei mit FileSaver.js herunterzuladen, aber ich bekomme eine beschädigte Datei, wenn ich Download-Taste drücke.

Die App wird von einem PHP REST Service unterstützt und die Verwendung von cURL von der Befehlszeile bestätigt, dass REST funktioniert.

ist hier die letzte Version von Pseudo-Code, den ich für das Herunterladen verwenden:

// Let str be the data received from $http promise 
// This code is run in a "then" callback 

var arr= new Uint8Array(str.length); 
for(var i=0; i<str.length; i++) { 
    arr[b]=str.charCodeAt(i); 
}; 
var blob = new Blob([arr], {type: 'application/octet-stream'}); 
saveAs(blob, "AFileName"); 

Es Datei nur korrumpiert.

Ich habe auch versucht, ohne die Uint8Array, und geben str direkt an Blob. Wie du vermutet hast, ist es auch gescheitert.

Ich schreibe Server und Client selbst, damit ich alles ändern kann. Aber die Sache ist, ich möchte Downloads clientseitig behandeln, und ich kann einfach nicht Benutzer zu Datei URL umleiten, um es herunterzuladen, weil REST Authentifizierung benötigt und dieses Token lebt nur in Angular App. Es wäre keine gute Wahl, den Server zu wechseln, nur um Dateidownloads ohne Authentifizierung zu handhaben.

Die REST hat URLs wie /files/:id, die, wenn sie aufgerufen werden, Dateiinhalt als regulären HTTP-Dateidownload (getestet mit cURL wie oben) gibt. Könnte $http das Problem sein? Irgendwie erzwingen sie irgendeine Art von Kodierung oder einige Annahmen über die empfangenen Daten. Ich habe ohnehin wenig Erfahrung in Angular.

Answer 1

Ich habe das Problem gefunden. Es war ich :)

Ich musste responseType: "arraybuffer" für $http angeben dann geben Sie str direkt an Blob.

Fest Code

// Let str be the data received from $http promise 
// This code is run in a "then" callback 
// Make sure to specify "responseType: "arraybuffer"" for $http 

var blob = new Blob([str], {type: 'application/octet-stream'}); 
saveAs(blob, "AFileName"); 

Ich ändere responseType in falscher Stelle.