Is it possible to force file downloads in browsers with angularjs?

Question

I'm have developed a SPA (Single Page Application) with AngularJS and I'm trying to force a pdf file download with AngularJS.

By the moment I only can open de pdf file in a new tab with the next code.

HTML view:

<a ng-click="download()"></a>

Controller:

$scope.download = function(){
    $window.open('/cv.pdf', '_blank');
};

Is there any way to force the pdf download in the browser?

You can see this example in the following URLs:

www.juanmanuellopezpazos.es/curriculum (HTML View)

www.juanmanuellopezpazos.es/Curriculum.pdf (pdf file whose download I want to force)

Kiran K Katkar · Answer 1 · 2016-11-23T11:20:06.517

I am done this in MVC.NET WITH ANGULAR JS. It works fine with firefox also(Tested in version:50.0) Write down following code in your function:

//in mvc view
<a ng-href="#"   title="{{attachments.FileName}} " ng-click="download(attachment.FilePath,attachment.FileName)">{{attachments.FileName}} </a>

// in .js file
 $scope.download = function download(pathoffile, filename) {
        $http.get(pathoffile, {
            responseType: "arraybuffer"
        }).then(function (response) {
            $scope.filedata = response.data; 
            var headers = response.headers(); 
            headers['Content-Disposition'] = "attachment";
            var blob = new Blob([response.data], { type: "octet/stream" });
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob); 
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }); 

    }

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

0

This previous question should provide quite a lot of information on this. (HTML) Download a PDF file instead of opening them in browser when clicked

In you're case I'd recommend just direct linking to the PDF and using the download attribute (http://www.w3schools.com/tags/att_a_download.asp).

edited May 23 '17 at 11:46

Community

1
1

answered Mar 17 '16 at 11:58

KieranDotCo

467
2
16

Thank you so much, but I have a little problem. If I use your recommended option, AngularJS manage the route as an app route, not as a resource. Is there any way to avoid this situation? – Juan Manuel Lopez Pazos Apr 06 '16 at 11:32
Hi again! I found one solution. If you add the "target" option with the value "_self", the pdf file is correctly downloaded. The final solution would be Download, where host could be "localhost" or any other. – Juan Manuel Lopez Pazos Apr 06 '16 at 11:45
@JuanManuelLopezPazos super glad you got it working :) – KieranDotCo Apr 06 '16 at 14:29

score 0 · Accepted Answer · edited May 23 '17 at 12:10

0

Finally I got the solution with @kierandotco answer. The best way is something like this:

<a href="host/file.pdf" download target="_self"></a>

The download HTML5 attribute and target attribute with _self value do the trick.

edited May 23 '17 at 12:10

Community

1
1

answered Mar 30 '17 at 12:51

Juan Manuel Lopez Pazos

1
1
2
6

This is not working for text files, any idea on how to download text files? – Sangeeta Chorage Jun 14 '18 at 12:51

Is it possible to force file downloads in browsers with angularjs?

3 Answers3