如何在angularjs中请求文件以异步下载？答案

【问题标题】：How to request files for download aync in angularjs?如何在angularjs中请求文件以异步下载？
【发布时间】：2016-02-19 16:48:04
【问题描述】：

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

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

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

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

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

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

这可能吗？

【问题讨论】：

标签： javascript angularjs

【解决方案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 文件，你应该添加更多的代码。

【讨论】：

这不适用于 FF 或 IE。您将能够下载 1 个文件，但不能下载多个文件。
是的，你说得对。如果你想在 IE 上下载文件，你可以使用 msSaveOrOpenBlob:msdn.microsoft.com/en-us/library/hh772332(v=vs.85).aspx。对于 FF，您必须使用“显示：无”CSS 规则将锚点添加到 DOM 中，调用点击操作并在之后删除。如果您调用此函数两次或多次，它也适用于多个文件。
_self 效果很好，但我想提供它作为下载。目前该文件在浏览器中内联打开。
另外我必须支持任何浏览器类型。

【解决方案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 和 FF 中下载多个文件，但是 IE 你不走运。

【讨论】：

我必须使用支持任何浏览器的方法，但无论如何谢谢。