Use dynamically created link to download file in AngularJS

Question

I'm using ng-click to call a function which makes a post http request to the server and then creates a link. How can I use this created link to also download the file attached to it?

My template

<button ng-click="getFile(row)">Download</button>

My controller

$scope.getFile = function(row){
    row.isSelected = true;

    var link = null;

    var postData = {
        "data" : {
            "type": "member_report",
            "relationships": {
                "member" : {
                    "data": {
                        "type": "user",
                        "id": memberID
                    }
                }
            }
        }
    }

    ajaxRequest.ajaxPost('http://someApi.com', postData).then(
        function(jsonAPI) {
            link = jsonAPI.links.download; //here is the response link
            //todo something with it to download file   
        },
        function(errorResponse) {           
        }
    );
}

By the way ajaxRequest is just a simple $http service wrapper.

score 2 · Answer 1 · answered Mar 16 '16 at 17:12

If I understood you, then I suppose that you want to initiate the download as soon as you get the link dynamically, then you can proceed as follows

$scope.getFile = function(row){
    row.isSelected = true;

    var link = null;

    var postData = {
        "data" : {
            "type": "member_report",
            "relationships": {
                "member" : {
                    "data": {
                        "type": "user",
                        "id": memberID
                    }
                }
            }
        }
    }

    ajaxRequest.ajaxPost('http://someApi.com', postData).then(
        function(jsonAPI) {
            link = jsonAPI.links.download;

            // Now we want to download the link 
           var downloadLink = document.createElement('a');
                downloadLink .href = link;
                // now set the visibility to hidden so that it doesnt effect the frontend layout
                downloadLink .style = 'visibility:hidden';
                downloadLink .download = 'file_name';
                // now append it to the document, generate click and remove the link
                document.body.appendChild(downloadLink );
                downloadLink .click();
                document.body.removeChild(downloadLink );

        },
        function(errorResponse) {           
        }
    );
}

score 1 · Answer 2 · edited May 23 '17 at 10:27

1

Try to save the link in the the $scope. Then, use this:

<a target="_self" href={{your variable}} download="foo.pdf">

Also check the documentation: http://docs.angularjs.org/guide/

Answer taken from here:

How do you serve a file for download with AngularJS or Javascript?

edited May 23 '17 at 10:27

Community

1
1

answered Mar 16 '16 at 16:11

Miguel Xoel Garcia

307
1
4
18

Thanks for the answer but I do not want to place my link on the view because it is created asynchronously. – Dimitrios Vythoulkas Mar 16 '16 at 16:20

score 1 · Answer 3 · answered Mar 16 '16 at 17:34

I managed to do it using the $window service.

ajaxRequest.ajaxPost('http://someApi.com', postData).then(
    function(jsonAPI) {
        link = jsonAPI.links.download;

        $window.location.href = link;

    },
    function(errorResponse) {           
    }
);

Just had to add $window as a dependency

Use dynamically created link to download file in AngularJS

3 Answers3