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?

Answer 1

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

Answer 2

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