使用angular js在前端下载文件

File Download at front end using angular js

本文关键字:下载 文件 前端 angular js 使用      更新时间:2023-09-26

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

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

只要后端Web服务器配置了正确的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发出请求并下载文件。