Laden Sie eine Datei herunter, während Sie auf den Link href klicken?

Question

Gibt es eine Möglichkeit, eine Datei herunterzuladen, wenn ich auf eine Datei mit ng-click klicke? Hier ist, was ich jetzt habe:

<a ng-href="../api/rest/admin/v1/syncsessions/export?fileKey={{syncObject.sourceFiles}}">Download file</a> 

Dies scheint gut zu funktionieren. Das Problem ist jedoch, wenn ich auf die href klicke, werde ich auf eine Seite mit der URL weitergeleitet. Als Ergebnis will, muss ich so etwas wie dies tun:

<a ng-click="getExportFiles({{syncObject.sourceFiles}})">Download File</a> 

Wo getExportFiles als so definiert:

var baseSyncUrl = "../api/rest/admin/{{path.version}}/syncsessions"; 
var exportSyncFileReq = {method: "GET", url: baseSyncUrl + "/export", params: {fileKey: ""}, path: {version: "v1"}}; 

$scope.getExportFiles = function(fileKey) { 
    var req = exportSyncFileReq; 
    req.params.fileKey = fileKey; 
    var data = RESTCaller.getConfig(req); 
    data.then(function(result) { 
     if(result) { 
      return result; 
     } 
    }) 
} 

innerhalb Ergebnis Enthalten die Verknüpfung zu der Datei ist, zum Beispiel wäre es https://<insertURL> sein, da RESTCaller packt meine promise nach dem Aufruf der exportSynceFileReq API aus. Das Problem ist, wenn ich ng-click mache, passiert nichts. Die Datei wird nicht heruntergeladen. Wenn ich das tue

<a ng-href="{{getExportFiles(syncObject.sourceFiles)}}">Download File</a> 

Ich bekomme eine unendliche Digest-Schleife. Gibt es einen Weg, wo ich einfach auf einen Link klicken, meine API aufrufen und die Datei dann automatisch herunterladen kann, ohne auf eine andere Seite umzuleiten? Jede Hilfe wäre willkommen. Vielen Dank!

Answer 1

Wenn Sie einen Link von dem Server haben, können Sie versuchen, Dummy-Link zu verwenden, und klicken Sie darauf:

$scope.getExportFiles = function(fileKey) { 
    var req = exportSyncFileReq; 
    req.params.fileKey = fileKey; 
    var data = RESTCaller.getConfig(req); 
    data.then(function(result) { 
     if (result) { 
      var link = document.createElement('a'); 
      //link.download = 'filename.ext'; 
      link.href = result; 
      link.click(); 
     } 
    }) 
} 

Answer 2

ich gebraucht habe, bevor genau diese mit AngularJS zu tun, und ich griff die angular-file-saver zu verwenden Bibliothek.

Der folgende Code verwendet Ihre anfängliche RESTCaller.getConfig(...) Funktion, aber dann verwendet die $http Anbieter den Inhalt der Datei zu holen, ein Blob-Objekt aus dem zurückgegebenen Puffer erstellen, und rufen Sie dann endlich angular-file-saver ‚s saveAs Funktion einen Browser herunterladen auszuführen.

$scope.getExportFiles = function(fileKey) { 

    // Build the URL we're wanting to fetch 
    RESTCaller.getConfig({ 
    method: "GET", 
    url: baseSyncUrl + "/export", 
    params: { 
     fileKey: fileKey.toString() 
    }, 
    path: { version: "v1" } 
    }).then(function(result) { 

    // Assuming result is the URL of the download file. 
    var fetchUrl = result.toString(); 

    // Check if the current browser has support for Blob objects 
    try { var blobSupport = !!new Blob; } catch (e) {} 

    // If there is Blob support, use the angular-file-saver library 
    // to download the file 
    if (blobSupport) { 

     $http 
     .get(fetchUrl, {}, { responseType: 'arraybuffer' }) 
     .then(function(response) { 
      saveAs(new Blob([ response.data ], { 
      // You need to specify the file format for the browser 
      // to handle the download correctly. Whether this is hard-coded 
      // or dynamically returned by your API is up to you. 
      type: 'application/octet-stream' 
      }), fileKey); 
     }); 

    } else { 

     // Use some other method a retrieving the file, whether 
     // that be creating an 'A' element in the DOM and triggering 
     // the 'click' event, or using $window 
     $window.open(fetchUrl); 

    } 

    }); 
}; 

Sie können weitere Informationen über Blob Objekte here finden. In diesem jsFiddle können Sie einige andere Blob-bezogene Beispiele sehen.