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

Question

I have some text in a hidden textarea. When a button is clicked I would like to have the text offered for download as a .txt file. Is this possible using AngularJS or Javascript?

What browsers do you support? This can be solved in some creative ways (like data-uris, blobs, the browser's history API, etc) but that really depends. — Benjamin Gruenbaum
– Benjamin Gruenbaum, Commented May 13, 2013 at 18:07
Angular File Saver is a good polyfill for less modern browsers. — georgeawg
– georgeawg, Commented Mar 12, 2017 at 23:19

ozba · Accepted Answer · 2015-05-18 20:31:25Z

112

You can do something like this using Blob.

<a download="content.txt" ng-href="{{ url }}">download</a>

in your controller:

var content = 'file content for example';
var blob = new Blob([ content ], { type : 'text/plain' });
$scope.url = (window.URL || window.webkitURL).createObjectURL( blob );

in order to enable the URL:

app = angular.module(...);
app.config(['$compileProvider',
    function ($compileProvider) {
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
}]);

Please note that

Each time you call createObjectURL(), a new object URL is created, even if you've already created one for the same object. Each of these must be released by calling URL.revokeObjectURL() when you no longer need them. Browsers will release these automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.

Source: MDN

edited May 18, 2015 at 20:31

ozba

6,6435 gold badges35 silver badges40 bronze badges

answered May 13, 2013 at 4:11

Tosh

36k11 gold badges67 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

dave1010 Over a year ago

Modern browsers & IE10+

JonnyRaa Over a year ago

@thriqon wow firefox + chrome really showing the others up there!

Gustavo Straube Over a year ago

Great solution, but $scope.url didn't worked for me. I had to use window.location instead.

coderman Over a year ago

I noticed that then anchor tag is prefixed with unsafe. In order to get around that you will need to add 'blob' to the white list in your app.js, using $compileProvider ` .config(['$compileProvider', function ($compileProvider) { $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/); } ` docs.angularjs.org/api/ng/provider/$compileProvider

Aaron Over a year ago

The download attribute isn't supported in any IE or Safari versions though caniuse.com/#feat=download

|

Amrut · Accepted Answer · 2015-02-16 12:12:46Z

35

Just click the button to download using following code.

in html

<a class="btn" ng-click="saveJSON()" ng-href="{{ url }}">Export to JSON</a>

In controller

$scope.saveJSON = function () {
			$scope.toJSON = '';
			$scope.toJSON = angular.toJson($scope.data);
			var blob = new Blob([$scope.toJSON], { type:"application/json;charset=utf-8;" });			
			var downloadLink = angular.element('<a></a>');
                        downloadLink.attr('href',window.URL.createObjectURL(blob));
                        downloadLink.attr('download', 'fileName.json');
			downloadLink[0].click();
		};

answered Feb 16, 2015 at 12:12

Amrut

4071 gold badge6 silver badges5 bronze badges

3 Comments

Harsh Daftary Over a year ago

@Amrut worked for me as needed, but can you explain the code ?

Tim Büthe Over a year ago

Like this solution! When getting the data from the server, e.g. using $http.get(...) make sure to set responseType:'arraybuffer' like explained here: stackoverflow.com/questions/21628378/…

sekky Over a year ago

Works in Chrome (Win), but Safari (Mac) just opens the blobbed file in the browser. (blob:https/...) Like that this solution lets me wait for my promises to be resolved though.

AhlemMustapha · Accepted Answer · 2014-03-08 12:19:32Z

26

Try this

<a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf">

and visit this site it could be helpful for you :)

http://docs.angularjs.org/guide/

answered Mar 8, 2014 at 12:19

AhlemMustapha

4055 silver badges13 bronze badges

3 Comments

Péha Over a year ago

Beware of the download attribute that's still not supported by any IE nor Safari version. Check it out here : caniuse.com/#feat=download

HardikDG Over a year ago

When i use it with angular it take url to $urlRouterProvider and redirect to my default page, is there any solution to download a file instead of navigation

slugmandrew Over a year ago

I always find it patronising when someone posts a link like that.

mm8154 · Accepted Answer · 2014-06-28 09:50:24Z

24

This can be done in javascript without the need to open another browser window.

window.location.assign('url');

Replace 'url' with the link to your file. You can put this in a function and call it with ng-click if you need to trigger the download from a button.

answered Jun 28, 2014 at 9:50

mm8154

4894 silver badges7 bronze badges

1 Comment

fdrv Over a year ago

It replaces site with Pdf doc instead to show download dialog window.

Ketan · Accepted Answer · 2013-10-08 19:14:01Z

15

In our current project at work we had a invisible iFrame and I had to feed the url for the file to the iFrame to get a download dialog box. On the button click, the controller generates the dynamic url and triggers a $scope event where a custom directive I wrote, is listing. The directive will append a iFrame to the body if it does not exist already and sets the url attribute on it.

EDIT: Adding a directive

appModule.directive('fileDownload', function ($compile) {
    var fd = {
        restrict: 'A',
        link: function (scope, iElement, iAttrs) {

            scope.$on("downloadFile", function (e, url) {
                var iFrame = iElement.find("iframe");
                if (!(iFrame && iFrame.length > 0)) {
                    iFrame = $("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>");
                    iElement.append(iFrame);
                }

                iFrame.attr("src", url);


            });
        }
    };

    return fd;
});

This directive responds to a controller event called downloadFile

so in your controller you do

$scope.$broadcast("downloadFile", url);

edited Oct 8, 2013 at 19:14

answered May 13, 2013 at 4:55

Ketan

5,8913 gold badges35 silver badges39 bronze badges

3 Comments

Sudhir N Over a year ago

Code snippet would be a great help.

Kanagu Over a year ago

The directive above is not working for me, when I put iframe creation outside scope.$on it creates iframe but $on event is not calling when using broadcast

Ketan Over a year ago

Yes $scope.$broadcast works only on children. You can put the directive on the top level scope if possible.

Jani Hartikainen · Accepted Answer · 2013-05-13 03:57:15Z

12

You can set location.href to a data URI containing the data you want to let the user download. Besides this, I don't think there's any way to do it with just JavaScript.

answered May 13, 2013 at 3:57

Jani Hartikainen

43.4k11 gold badges70 silver badges87 bronze badges

3 Comments

XML Over a year ago

This works great for me, and was much cleaner than all the other things we were trying, or IMHO, the complicated approaches recommended above. Angular ignores it entirely. Or, you can also use window.open()/$window.open() if you want to try to open in another window. But you'll run into popup blockers in modern browsers...

igortg Over a year ago

In Angular 1.3, $location.href changed to $window.location.href

herrtim Over a year ago

This is a great answer. The following link on SO provides a full working example: stackoverflow.com/a/30889331/1625820

Community · Accepted Answer · 2020-06-20 09:12:55Z

7

Would just like to add that in case it doesn't download the file because of unsafe:blob:null... when you hover over the download button, you have to sanitize it. For instance,

var app = angular.module('app', []);

app.config(function($compileProvider){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/);

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 9, 2014 at 23:17

Samir Alajmovic

3,3033 gold badges29 silver badges28 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:47:29Z

5

If you have access to on the server, consider setting headers as answered in this more general question.

Content-Type: application/octet-stream
Content-Disposition: attachment;filename=\"filename.xxx\"

Reading the comments on that answer, it is advisable to use a more specific Content-Type than octet-stream.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Aug 5, 2016 at 15:45

plong0

2,1891 gold badge19 silver badges19 bronze badges

Comments

havelino · Accepted Answer · 2016-05-20 23:40:40Z

I had teh same problem and spend many hours find diferent solutions, and now I join all the comments in this post.I hope it, will be helpfull, my answer was correctly tested on Internet Explorer 11, Chrome and FireFox.

HTML :

<a href="#" class="btn btn-default" file-name="'fileName.extension'"  ng-click="getFile()" file-download="myBlobObject"><i class="fa fa-file-excel-o"></i></a>

DIRECTIVE :

directive('fileDownload',function(){
    return{
        restrict:'A',
        scope:{
            fileDownload:'=',
            fileName:'=',
        },

        link:function(scope,elem,atrs){


            scope.$watch('fileDownload',function(newValue, oldValue){

                if(newValue!=undefined && newValue!=null){
                    console.debug('Downloading a new file'); 
                    var isFirefox = typeof InstallTrigger !== 'undefined';
                    var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
                    var isIE = /*@cc_on!@*/false || !!document.documentMode;
                    var isEdge = !isIE && !!window.StyleMedia;
                    var isChrome = !!window.chrome && !!window.chrome.webstore;
                    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
                    var isBlink = (isChrome || isOpera) && !!window.CSS;

                    if(isFirefox || isIE || isChrome){
                        if(isChrome){
                            console.log('Manage Google Chrome download');
                            var url = window.URL || window.webkitURL;
                            var fileURL = url.createObjectURL(scope.fileDownload);
                            var downloadLink = angular.element('<a></a>');//create a new  <a> tag element
                            downloadLink.attr('href',fileURL);
                            downloadLink.attr('download',scope.fileName);
                            downloadLink.attr('target','_self');
                            downloadLink[0].click();//call click function
                            url.revokeObjectURL(fileURL);//revoke the object from URL
                        }
                        if(isIE){
                            console.log('Manage IE download>10');
                            window.navigator.msSaveOrOpenBlob(scope.fileDownload,scope.fileName); 
                        }
                        if(isFirefox){
                            console.log('Manage Mozilla Firefox download');
                            var url = window.URL || window.webkitURL;
                            var fileURL = url.createObjectURL(scope.fileDownload);
                            var a=elem[0];//recover the <a> tag from directive
                            a.href=fileURL;
                            a.download=scope.fileName;
                            a.target='_self';
                            a.click();//we call click function
                        }


                    }else{
                        alert('SORRY YOUR BROWSER IS NOT COMPATIBLE');
                    }
                }
            });

        }
    }
})

IN CONTROLLER:

$scope.myBlobObject=undefined;
$scope.getFile=function(){
        console.log('download started, you can show a wating animation');
        serviceAsPromise.getStream({param1:'data1',param1:'data2', ...})
        .then(function(data){//is important that the data was returned as Aray Buffer
                console.log('Stream download complete, stop animation!');
                $scope.myBlobObject=new Blob([data],{ type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
        },function(fail){
                console.log('Download Error, stop animation and show error message');
                                    $scope.myBlobObject=[];
                                });
                            };

IN SERVICE:

function getStream(params){
                 console.log("RUNNING");
                 var deferred = $q.defer();

                 $http({
                     url:'../downloadURL/',
                     method:"PUT",//you can use also GET or POST
                     data:params,
                     headers:{'Content-type': 'application/json'},
                     responseType : 'arraybuffer',//THIS IS IMPORTANT
                    })
                    .success(function (data) {
                        console.debug("SUCCESS");
                        deferred.resolve(data);
                    }).error(function (data) {
                         console.error("ERROR");
                         deferred.reject(data);
                    });

                 return deferred.promise;
                };

BACKEND(on SPRING):

@RequestMapping(value = "/downloadURL/", method = RequestMethod.PUT)
public void downloadExcel(HttpServletResponse response,
        @RequestBody Map<String,String> spParams
        ) throws IOException {
        OutputStream outStream=null;
outStream = response.getOutputStream();//is important manage the exceptions here
ObjectThatWritesOnOutputStream myWriter= new ObjectThatWritesOnOutputStream();// note that this object doesn exist on JAVA,
ObjectThatWritesOnOutputStream.write(outStream);//you can configure more things here
outStream.flush();
return;
}

Thanks, this really worked for me, specially since i needed large file transfers.

Zohab Ali · Accepted Answer · 2018-07-05 06:44:41Z

3

This worked for me in angular:

var a = document.createElement("a");
a.href = 'fileURL';
a.download = 'fileName';
a.click();

answered Jul 5, 2018 at 6:44

Zohab Ali

9,8545 gold badges67 silver badges75 bronze badges

1 Comment

dǝɥɔS ʇoıןןƎ Over a year ago

If you have a string you want to download, just change fileURL to data:text/plain;base64,${btoa(theStringGoesHere)}

om471987 · Accepted Answer · 2014-06-16 20:38:28Z

2

I didnt want Static Url. I have AjaxFactory for doing all ajax operations. I am getting url from the factory and binding it as follows.

<a target="_self" href="{{ file.downloadUrl + '/' + order.OrderId + '/' + fileName }}" download="{{fileName}}">{{fileName}}</a>

Thanks @AhlemMustapha

answered Jun 16, 2014 at 20:38

om471987

5,7175 gold badges35 silver badges41 bronze badges

Collectives™ on Stack Overflow

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

11 Answers 11

8 Comments

3 Comments

3 Comments

1 Comment

3 Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

8 Comments

3 Comments

3 Comments

1 Comment

3 Comments

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related