# Angular File Saver

## An AngularJS service that provides cross-browser compatibility of the HTML5 saveAs()

View on GitHub Download .zip Download .tar.gz

# 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

- 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

### Demo

Download as a text file

Hey ho let's go! Download