Question

我正在使用angularjs，并希望提供下载按钮。

问题：在从后端返回文件之前，该按钮会在后端触发长时间运行（15秒）的进程。不应同时阻止用户。

所以我想我可以在后台使用angularjs获取文件，并在收到异步时提供下载。

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

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

这样我就可以直接打开另一页了。哪个有效，但我想在后台获取它，而不是打开一个新窗口。

这可能吗？

Answer 1

也许最好的解决方案是使用这个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文件，你应该添加更多的代码。

Answer 2

另一种方法是使用隐藏的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和Chrome中下载多个文件。 FF，但是IE你运气不好。

如何在angularjs中请求下载aync的文件？

2 个答案: