Datei herunterladen mit Angular und Django

Question

Ich habe eine Tabelle mit einer Liste von Dateien vom Server abgerufen. Ich habe auch eine Schaltfläche, die die ausgewählte Datei herunterlädt. Also habe ich eine Funktion erstellt, die einen Dienst aufruft und die Antwort (die Datei) in einem neuen Fenster öffnet, damit der Benutzer sie herunterladen kann. Steuerung:

$scope.download = function() { 

if ($scope.cancelPromise) { 
    $scope.cancelPromise.resolve(); 
} 
$scope.cancelPromise = $q.defer(); 
UserFileSrv.downloadFile.download(
    { 
    fileId: $scope.selectedFile.id 
    },function(data) { 
    if (data) { 
     toaster.pop('success', 'Success', 'success'); 
     window.open(data); 
    } 
    }, function(error) { 
    if (error) { 
     toaster.pop('error', 'Error', error); 
    } 
    } 
); 

};

Der Service:

angular.module('app').factory('UserFileSrv', ['$resource', function($resource) { 
var userFile = { 
    downloadFile: $resource('my_url/:fileId/?', { 
     fileId: '@fileId' 
    }, { 
     download: { 
     method: 'GET', 
     isArray: false 
     } 
    }) 
    }; 
    return userFile; 
}]); 

Der Browser zeigt den 'Erfolg' Toaster, aber es öffnet sich ein Fenster, das diese Zeichenfolge enthält: Cannot GET /%5Bobject%20Object%5D

Hinweis: Der Content-Type der Antwort lautet: application/json

Answer 1

Es scheint, dass Sie versuchen, den heruntergeladenen Inhalt an die Funktion window.open zu übergeben. window.open akzeptieren Sie die URL als erstes Argument. Sie können Ihr Problem in zwei Fällen lösen:

1) Bilden Sie die URL zu der Ressource (ex: 'my_url/12343') und übergeben Sie es an das geöffnete Fenster. Stellen Sie jedoch sicher, dass der Server die Antwort mit dem Header zurückgibt. Content-Disposition = Anhang; fileName = someFileName. Dadurch wird der Browser gezwungen, die Antwort als Anhang zu verarbeiten.

2) Andernfalls können Sie Blob verwenden. (Es wird nicht in IE 9 oder weniger arbeiten)

https://developer.mozilla.org/en-US/docs/Web/API/Blob

Statt windows.open Sie folgende machen:

function downloadBlob(fileName, blob){ 

    //IE case 
    if (!!window.navigator.msSaveBlob){ 
    window.navigator.msSaveBlob(blob, fileName); 
    return; 
    } 

    //create url 
    var url = URL.createObjectURL(blob); 

    //create invisible acnhor, to specify the file name 
    var a = document.createElement('a'); 
    document.body.appendChild(a); 
    a.style = "display: none"; 
    a.href = url; 
    a.download = fileName; 
    a.click(); 

    setTimeout(function(){ 
    URL.revokeObjectURL(url); 
    document.body.removeChild(a); 
    }, 100); 

} 

var data = {x: 1, y:2, name: 'abc'}; 
var blob = new Blob([JSON.stringify(data)], {type : 'octet/stream'}); 

downloadBlob('myData.json', blob) 

Die vollständige Lösung, die zeigt, wie Blobs zum Download mit ngResource ist here