Angular trigger a download on api response with filename

Question

I am using angular and laravel. on a post request PHP creates a file and responds with the filename. How to use that filename and trigger download from angular.

api request

    var promise = $http.post('api/admin/ecs/singleecs', data).
        success(function (response) {
             //trigger file download
    })

php

PDF::loadHTML($html)->setPaper('a4')->setWarnings(false)->save('public/temp/'.$filename.'.pdf');
return $filename;

score 0 · Answer 1 · answered Nov 29 '14 at 14:03

0

To solve this issue I would take the following steps:

Create a hidden a element on the page.

<a id="fileDownloadLink" ng-hide="true" ng-href={downloadUrl} />

Use the following code to set the download URL and trigger the download.

$scope.downloadUrl = response.data.fileName;

var fileDownloadLink = document.getElementById("fileDownloadLink");
fileDownloadLink.target = "_blank"; // Opens the file in a new window.
fileDownloadLink.click();

answered Nov 29 '14 at 14:03

ACOMIT001

510
1
7
21

your code was helpful, i needed to modify it. now i got the url `/home/abel/pro/public/sample.zip` but if i click it goes to `http://localhost:8000/home/abel/pro/public/sample.zip` how to remove localhost:8000 its been served for laravel php – abel dharmaraj Nov 29 '14 at 14:41
Can you tell me what your response object is returning? – ACOMIT001 Nov 29 '14 at 14:48
I am returning the path of the file created – abel dharmaraj Nov 29 '14 at 16:45
Won't this be blocked by most browsers as a popup? – Luiz C. Nov 09 '15 at 17:34

score 0 · Answer 2 · edited May 23 '17 at 11:44

You can use $window.location to trigger the download. This will work only if "Content-Disposition: attachment" is in the response header of the resource_url:

var promise = $http.post('api/admin/ecs/singleecs', data)
                   .then(function (response) {
                     $window.location = response.resource_url;
                   });

Note: This is the angular version of the jQuery pattern illustrated here: https://stackoverflow.com/a/11620720/271178

Angular trigger a download on api response with filename

2 Answers2