Angular File Saver 
Angular File Saver is an AngularJS service that leverages FileSaver.js and Blob.js to implement the HTML5 W3C saveAs() interface in browsers that do not natively support it.
Dependencies
File dist/angular-file-saver.bundle.js
contains all required dependencies and
grants access to both Blob.js
and FileSaver.js
polyfills via Blob
and
SaveAs
services.
Installation
Using bower:
$ bower install angular-file-saver
Using npm:
$ npm install angular-file-saver
Basic usage
- Include the
ngFileSaver
module into your project; - Pass both
FileSaver
andBlob
services as dependencies; - Create a Blob object
passing an array with data as a first argument and an object with set of options
as the second one:
new Blob(['text'], { type: 'text/plain;charset=utf-8' })
; - Invoke
FileSaver.saveAs
with the following arguments:data
Blob: a Blob instance;filename
String: Custom filename (extension is optional);disableAutoBOM
Boolean: (optional) Disable automatically provided Unicode text encoding hints;
Example
JS
function ExampleCtrl($timeout, FileSaver, Blob) {
var vm = this;
vm.val = {
text: 'Hey ho lets go!'
};
vm.download = function(text) {
var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
$timeout(FileSaver.saveAs.bind(FileSaver, data, 'text.txt'), 100);
};
}
angular
.module('fileSaverExample', ['ngFileSaver'])
.controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);
HTML
<div class="wrapper" ng-controller="ExampleCtrl as vm">
<textarea
ng-model="vm.val.text"
ng-model-options="{ getterSetter: true }"
name="textarea" rows="5" cols="20">
Hey ho let's go!
</textarea>
<a href="" class="btn btn-dark btn-small" ng-click="vm.download(vm.val.text)">
Download
</a>
</div>
Demo
Demo
Download as a text file