AngularJs通过调用REST端点来触发文件下载 [英] AngularJs trigger a file download by calling a REST endpoint

问题描述

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

I have an Angular app and I want to trigger a file download (XML) when someone clicks on the link. The link is actually calling a REST endpoint on the backend and then the end point returns the file that needs to be downloaded. All this needs to be done by sending HTTP headers also which I have hadcoded in my code. But I am not quite sure how to do it here. Here is my code:

<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>

当我点击交付XML时，我有一个ng-click方法vm.downloadXML 在我的JS文件中看起来像这样：

When I click on the "Delivery XML", I have an ng-click method "vm.downloadXML" which in my JS file looks like this:

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调用之后处理我的代码。任何建议

I am not sure how do I process after the $http.get call in my code. Any suggestions

推荐答案

您可以追加< a> 标记，将文件URL设置为href属性并触发单击以下载文件。检查下面的代码，

You can append an <a> tag, set file url to href property and trigger click to download file. check below code,

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();
    });
}

这篇关于AngularJs通过调用REST端点来触发文件下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！