23 | 24 | 25 |

Angular File Saver

26 |

NPM version 27 | Build Status 28 | Dependency Status

29 |
30 |

Angular File Saver is an AngularJS service that leverages 31 | FileSaver.js and 32 | Blob.js to implement the HTML5 W3C 33 | saveAs() interface in browsers that do not natively support it

34 |
35 |

Dependencies

36 | 41 |

File dist/angular-file-saver.bundle.js contains all required dependencies and 42 | grants access to both Blob.js and FileSaver.js polyfills via Blob and 43 | SaveAs services.

44 |

Installation

45 |
# Using bower:
 46 | $ bower install angular-file-saver
 47 | 
 48 | # Using npm:
 49 | $ npm install angular-file-saver
 50 | 
51 |

Basic usage

52 |
    53 |
  • Include ngFileSaver module into your project;
  • 54 |
  • Pass both FileSaver and Blob services as dependencies;
  • 55 |
  • Create a Blob object by 56 | passing an array with data as the first argument and an object with set of options 57 | as the second one: new Blob(['text'], { type: 'text/plain;charset=utf-8' });
  • 58 |
  • Invoke FileSaver.saveAs with the following arguments:
      59 |
    • data Blob: a Blob instance;
    • 60 |
    • filename String: a custom filename (an extension is optional);
    • 61 |
    • disableAutoBOM Boolean: (optional) Disable automatically provided Unicode text encoding hints;
    • 62 |
    63 |
  • 64 |
65 |

Demo

66 |

API

67 |

FileSaver

68 |

A core Angular factory.

69 |

#saveAs(data, filename[, disableAutoBOM])

70 |

Immediately starts saving a file

71 |

Parameters

72 |
    73 |
  • Blob data: a Blob instance;
  • 74 |
  • String filename: a custom filename (an extension is optional);
  • 75 |
  • Boolean disableAutoBOM : (optional) Disable automatically provided Unicode text encoding hints;
  • 76 |
77 |

Blob(blobParts[, options]))

78 |

An Angular factory that returns a Blob instance.

79 |

SaveAs(data, filename[, disableAutoBOM])

80 |

An Angular factory that returns a FileSaver.js polyfill.

81 |

Example

82 |

JS

83 |
function ExampleCtrl(FileSaver, Blob) {
 84 |   var vm = this;
 85 | 
 86 |   vm.val = {
 87 |     text: 'Hey ho lets go!'
 88 |   };
 89 | 
 90 |   vm.download = function(text) {
 91 |     var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
 92 |     FileSaver.saveAs(data, 'text.txt');
 93 |   };
 94 | }
 95 | 
 96 | angular
 97 |   .module('fileSaverExample', ['ngFileSaver'])
 98 |   .controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);
 99 | 
100 |

HTML

101 |
<div class="wrapper" ng-controller="ExampleCtrl as vm">
102 |   <textarea
103 |     ng-model="vm.val.text"
104 |     name="textarea" rows="5" cols="20">
105 |       Hey ho let's go!
106 |   </textarea>
107 |   <a href="" class="btn btn-dark btn-small" ng-click="vm.download(vm.val.text)">
108 |     Download
109 |   </a>
110 | </div>
111 | 
112 |

License

113 |

MIT © Philipp Alferov

114 | 115 | 116 | 117 |

Demo

118 |

Download as a text file

119 |
120 | 121 | Download 122 |
123 | 124 | 129 | 130 |