如何在angularjs中請求文件以下載aync？

我在使用angularjs並且想提供一個下載按鈕。如何在angularjs中請求文件以下載aync？

問題：在從後端返回文件之前，該按鈕會在後端觸發長時間運行（15秒）的進程。用戶不應該在同一時間被阻止。

所以我想我可以在點擊時使用angularjs在後臺獲取文件，並在收到異步時提供下載。

<a ng-href="{{service.pdf()}}" target="_blank">download</a> 

function pdf() { 
    return "http://path.to.the.service/filename.pdf"; 
}

這樣我就直接打開另一頁。哪些工作，但我想在後臺獲取它，而不是打開一個新的窗口。

這可能嗎？

來源

2016-02-19 membersound

也許最好的解決方案是使用這個html代碼給你按鈕？讓我們試試這個：

<a ng-href="{{service.pdf()}}" target="_self">download</a>

但是你也可以用AngularJS來做到這一點。例如，您的代碼如下所示：

<button type="button" ng-click="downloadFile()" name="button">Download file</button>

ng-click調用您的downloadFile（）函數。您可以在此功能中執行您的下載操作：

$http.get('/path/to/your/file', { responseType: 'blob' }) 
.then((response) => { 
    var windowUrl = $window.URL || $window.webkitURL; 

    var anchor = angular.element('<a></a>'); 
    anchor 
    .attr({ 
     href: windowUrl.createObjectURL(response.data), 
     download: 'file.txt', 
    }); 
    anchor[0].click(); 
    } 
});

此解決方案也適用於基於令牌的授權（帶攔截器）的API。但是如果你想在IE和Mozilla中保存Blob文件，你應該添加更多的代碼。

來源

2016-02-19 17:26:24 Alexance

這不適用於FF或IE。您將能夠下載1個文件，但不能下載多個文件。 – brewsky

是的，你說得對。如果你想在IE上下載文件，你可以使用msSaveOrOpenBlob：https：//msdn.microsoft.com/en-us/library/hh772332(v=vs.85).aspx。對於FF，您必須使用'display：none'CSS規則將錨點添加到您的DOM中，調用點擊操作並在之後移除。它也適用於多個文件，如果您調用此函數兩次或更多次。 – Alexance

'_self'很棒，但我想將它作爲下載提供。目前該文件在瀏覽器中內聯打開。 – membersound

另一種方法是使用隱藏的iframe來下載文件。這可用於在一個頁面中下載多個文件的場景 - 其中<a>方法在FF上不起作用。

$scope.downloadUrl = function (url) { 
     var oIframe = window.document.createElement('iframe'); 
     var $body = $(document.body); 
     var $oIframe = $(oIframe).attr({ 
      src: url, 
      style: 'display:none;' 
     }); 
     $body.append($oIframe); 
    }

您可以下載多個文件在Chrome & FF，但是你的IE的運氣了。

來源

2016-02-20 01:22:20 brewsky

我必須使用支持任何瀏覽器的方法，不過謝謝。 – membersound

如何在angularjs中請求文件以下載aync？

回答

相關問題