- - -

Angular File Saver

-

NPM version -Build Status -Dependency Status

-
-

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 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

- - - -

Demo

-

Download as a text file

-
- - Download -
- - - -