angular-file-saver

!NPM versionnpm-imagenpm-url !Build Statustravis-imagetravis-url !Dependency Statusdepstat-imagedepstat-url

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

• Angular
• FileSaver.js
• Blob.js

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 ngFileSaver module into your project;
• Pass both FileSaver and Blob services as dependencies;
• Create a Blob object by

passing an array with data as the 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: a custom filename (an extension is optional); - disableAutoBOM Boolean: (optional) Disable automatically provided Unicode text encoding hints;
Demo

API

FileSaver

A core Angular factory.

#saveAs(data, filename[, disableAutoBOM])

Immediately starts saving a file

Parameters

• Blob data: a Blob instance;
• String filename: a custom filename (an extension is optional);
• Boolean disableAutoBOM : (optional) Disable automatically provided Unicode text encoding hints;

Blob(blobParts[, options]))

An Angular factory that returns a Blob instance.

SaveAs(data, filename[, disableAutoBOM])

An Angular factory that returns a FileSaver.js polyfill.

Example

JS

function ExampleCtrl(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' });
    FileSaver.saveAs(data, 'text.txt');
  };
}

angular
  .module('fileSaverExample', ['ngFileSaver'])
  .controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);

HTML

<div class="wrapper" ng-controller="ExampleCtrl as vm">
  <textarea
    ng-model="vm.val.text"
    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>

License

MIT © Philipp Alferov