使用 Angular js 在前端下载文件答案

【问题标题】：File Download at front end using angular js使用 Angular js 在前端下载文件
【发布时间】：2015-04-02 12:39:46
【问题描述】：

点击文件名旁边的下载按钮，我从后端获取文件内容。此内容以字节为单位。该文件可以是任何类型。如何将从后端接收到的数据转换为文件并在接收响应（文件内容）时自动下载。html和角度js中的新蜜蜂。需要任何指针或建议:)

【问题讨论】：

贴一些代码sn-p。
你有文件类型的例子吗？创建文件后您打算做什么？你有任何可以发布的代码sn-ps吗？
前端是否对数据做任何事情？或者它应该简单地下载到客户端机器上？因为在后一种情况下，我假设您最好将文件直接下载到客户端，而不是由 angular 处理。因此，这不是 javascript，也不是角度问题，而是后端问题（无论您在后端使用什么）
类似于stackoverflow.com/a/17178685/697020。要点是您不能使用角度来下载文件。我最近遇到了这个问题，并通过使用普通的旧 HTML 表单 POST 到服务器来解决它，并添加了“Content-Disposition：附件”的响应头。

标签： javascript angularjs

【解决方案1】：

您需要让后端告诉前端文件的位置，然后前端可以放置文件的链接。后端可能应该为此文件生成一个唯一的哈希名称。

只要后端网络服务器配置了正确的 mime 类型，就可以将实际文件作为 Rest GET 请求的一部分返回。

所以在你的控制器中你会调用一个服务来获取文件路径：

SomeController.$inject = ['$http'];
var SomeController = function($http) {

    var self = this;
    $http.get('/download-file-path').then(function(path) {
        self.path = path; 
    }

}

那么在你看来

<div ng-controller='SomeController as vm'>
    <a ng-href="{{vm.path}}">Download</a>
</div>

当 Angular 调用 GET: /download-file-path 时，后端应该返回文件的名称和路径，例如 /download/file-7dje79ae.xml。然后 Angular 将此路径放在 a 链接中。当用户点击下载按钮时，用户浏览器会向/download/file-7dje79ae.xml发出请求并下载文件。

【讨论】：

嗨马丁感谢您的解决方案，但我没有从后端获取文件路径。
我只得到文件数据
你只需要直接链接到路径。