AngularJs 通过调用 REST 端点触发文件下载

Question

我有一个 Angular 应用程序，我想在有人点击链接时触发文件下载 (XML)。该链接实际上是在后端调用 REST 端点，然后端点返回需要下载的文件。所有这些都需要通过发送我在代码中编码的 HTTP 标头来完成。但我不太确定如何在这里做。这是我的代码：

<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8" ng-if="vm.deliveries.length!=0">
                    <thead>
                    <tr>
                        <th>Release Slug</th>
                        <th>Status</th>
                        <th>Delivery XML</th>
                        <th>Retry</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="delivery in vm.deliveries" footable>
                        <td>{{delivery.slug}}</td>
                        <td>{{delivery.data.status}}</td>
                        <td align="center">
                            <a target="_self"
                                    href="{{config.apiUrl}}/deliveries/{{delivery.slug}}/ddex"
                                    tooltip="Download" ng-click="vm.getDeliveryDdex(delivery.slug)"><i class="fa fa-download"/></a>
                        </td>
                        <td><a ng-click="vm.downloadXML(delivery.slug)" ng-if="delivery.data.status=='FAILED'">
                            <i class="fa fa-repeat"></i></a></td>
                        </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="5">
                            <ul class="pagination pull-right"></ul>
                        </td>
                    </tr>
                    </tfoot>
                </table>

当我点击“Delivery XML”时，我有一个 ng-click 方法“vm.downloadXML”，它在我的 JS 文件中如下所示：

function DeliveriesController(deliveriesService){
    var vm = this;
    vm.deliveries = {};

    vm.downloadXML = downloadXML;

        function downloadXML(releaseSlug){
        var url = APP_CONFIG.apiUrl + '/deliveries/' + releaseSlug + '/xml';
        var expectedMediaType = 'xml';
        var headers = {'User-Id':'abc','User-Name':'ABC XYZ', 'Workspace':'abc', 'Content-Type': 'application/xml', 'Accept': expectedMediaType};

        $http.get(url,{
            headers: headers
        }).then(function (response){
            console.log(response);
        });
    }

我不确定在代码中调用 $http.get 之后如何处理。任何建议

Answer 1

您可以附加一个<a> 标签，将文件url 设置为href 属性并触发点击下载文件。检查下面的代码，

function DeliveriesController(deliveriesService){
    var vm = this;
    vm.deliveries = {};
    vm.downloadXML = downloadXML;

    function downloadXML(releaseSlug){
    var url = APP_CONFIG.apiUrl + '/deliveries/' + releaseSlug + '/xml';
    var expectedMediaType = 'xml';
    var headers = {'User-Id':'abc','User-Name':'ABC XYZ', 'Workspace':'abc', 'Content-Type': 'application/xml', 'Accept': expectedMediaType};

    $http.get(url,{
        headers: headers
    }).then(function (response){
        console.log(response);
        //=== add <a> tag and trigger click ===
        var link = document.createElement('a');
        link.addEventListener('click', function(ev) {
        link.href = response.url; // url of the file to be downloaded
        link.download = "name";
        document.body.removeChild(link);
        }, false);
        document.body.appendChild(link);
        link.click();
    });
}