AngularJs trigger a file download by calling a RES

Question

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>

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

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

Answer 1

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