hrefリンクをクリックしてファイルをダウンロードしますか？

Question

ng-clickを使用してファイルをクリックすると、ファイルをダウンロードすることはできますか？ここに私は今いる：

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

これはうまくいくようです。しかし、問題は、私がhrefをクリックすると、そのURLを持つページにリダイレクトされます。その結果、私はこのような何かをしたい：

getExportFilesはそうのように定義されて

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

：

結果に含ま

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; 
     } 
    }) 
} 

は、例えば、それはので、https://<insertURL>になり、ファイルへのリンクありRESTCaller APIを定義してexportSynceFileReqを呼び出した後、promiseをアンラップします。問題は、私がng-clickを実行しても、何も起こらないということです。ファイルはダウンロードされません。私が行う場合

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

私は無限のダイジェストループを取得します。リンクをクリックしてAPIを呼び出し、別のページにリダイレクトせずにファイルを自動的にダウンロードできる方法はありますか？どんな助けもありがとう。ありがとう！

Answer 1

あなたはダミーのリンクを使用し、それをクリックしようとすることができ、サーバからのリンクがある場合：

$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

を私は前AngularJSと正確にこれを行うために必要なてきた、と私はangular-file-saverを使用してに頼っとしょうかん。

以下のコードは、あなたの最初のRESTCaller.getConfig(...)機能を使用していますが、その後、ファイルの内容をフェッチ返されたバッファのうち、Blobオブジェクトを作成し、最終的には、ブラウザのダウンロードを実行するためにangular-file-saverのsaveAs機能を呼び出すために$httpプロバイダを使用しています。

$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); 

    } 

    }); 
}; 

詳細については、Blobオブジェクトhereを参照してください。

このjsFiddleには、他のBLOB関連の例があります。