-
Notifications
You must be signed in to change notification settings - Fork 105
/
Copy pathindex.html
133 lines (119 loc) · 6.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Angular File Saver - an AngularJS service that provides cross-browser compatibility of the HTML5 saveAs()</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="dist/examples.css" media="screen">
<script src="dist/examples.js"></script>
</head>
<body ng-app="fileSaverExample">
<section class="page-header">
<h1 class="project-name">Angular File Saver</h1>
<h2 class="project-tagline">An AngularJS service that provides cross-browser compatibility of the HTML5 saveAs()</h2>
<a href="https://github.com/alferov/angular-file-saver" class="btn">View on GitHub</a>
<a href="https://github.com/alferov/angular-file-saver/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/alferov/angular-file-saver/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<!-- inject:html -->
<h1 id="angular-file-saver">Angular File Saver</h1>
<p><a href="https://npmjs.org/package/angular-file-saver"><img src="https://img.shields.io/npm/v/angular-file-saver.svg?style=flat-square" alt="NPM version"></a>
<a href="https://travis-ci.org/alferov/angular-file-saver"><img src="https://img.shields.io/travis/alferov/angular-file-saver.svg?style=flat-square" alt="Build Status"></a>
<a href="https://david-dm.org/alferov/angular-file-saver"><img src="https://david-dm.org/alferov/angular-file-saver.svg?style=flat-square" alt="Dependency Status"></a></p>
<blockquote>
<p>Angular File Saver is an AngularJS service that leverages
<a href="https://github.com/eligrey/FileSaver.js/">FileSaver.js</a> and
<a href="https://github.com/eligrey/Blob.js/">Blob.js</a> to implement the HTML5 W3C
saveAs() interface in browsers that do not natively support it</p>
</blockquote>
<h2 id="dependencies">Dependencies</h2>
<ul>
<li><a href="https://github.com/angular/angular.js">Angular</a></li>
<li><a href="https://github.com/eligrey/FileSaver.js/">FileSaver.js</a></li>
<li><a href="https://github.com/eligrey/Blob.js/">Blob.js</a></li>
</ul>
<p>File <code>dist/angular-file-saver.bundle.js</code> contains all required dependencies and
grants access to both <code>Blob.js</code> and <code>FileSaver.js</code> polyfills via <code>Blob</code> and
<code>SaveAs</code> services.</p>
<h2 id="installation">Installation</h2>
<pre><code class="lang-sh"># Using bower:
$ bower install angular-file-saver
# Using npm:
$ npm install angular-file-saver
</code></pre>
<h2 id="basic-usage">Basic usage</h2>
<ul>
<li>Include <code>ngFileSaver</code> module into your project;</li>
<li>Pass both <code>FileSaver</code> and <code>Blob</code> services as dependencies;</li>
<li>Create a <a href="https://developer.mozilla.org/en/docs/Web/API/Blob">Blob object</a> by
passing an array with data as the first argument and an object with set of options
as the second one: <code>new Blob(['text'], { type: 'text/plain;charset=utf-8' })</code>;</li>
<li>Invoke <code>FileSaver.saveAs</code> with the following arguments:<ul>
<li><code>data</code> <strong>Blob</strong>: a Blob instance;</li>
<li><code>filename</code> <strong>String</strong>: a custom filename (an extension is optional);</li>
<li><code>disableAutoBOM</code> <strong>Boolean</strong>: (optional) Disable automatically provided Unicode text encoding hints;</li>
</ul>
</li>
</ul>
<p><a href="http://alferov.github.io/angular-file-saver/#demo">Demo</a></p>
<h2 id="api">API</h2>
<h3 id="-filesaver-"><code>FileSaver</code></h3>
<p>A core Angular factory.</p>
<h4 id="-saveas-data-filename-disableautobom-"><code>#saveAs(data, filename[, disableAutoBOM])</code></h4>
<p>Immediately starts saving a file</p>
<h4 id="parameters">Parameters</h4>
<ul>
<li><strong>Blob</strong> <code>data</code>: a Blob instance;</li>
<li><strong>String</strong> <code>filename</code>: a custom filename (an extension is optional);</li>
<li><strong>Boolean</strong> <code>disableAutoBOM</code> : (optional) Disable automatically provided Unicode text encoding hints;</li>
</ul>
<h3 id="-blob-blobparts-options-"><code>Blob(blobParts[, options]))</code></h3>
<p>An Angular factory that returns a <a href="https://developer.mozilla.org/en/docs/Web/API/Blob">Blob instance</a>.</p>
<h3 id="-saveas-data-filename-disableautobom-"><code>SaveAs(data, filename[, disableAutoBOM])</code></h3>
<p>An Angular factory that returns a <a href="https://github.com/eligrey/FileSaver.js/#syntax">FileSaver.js polyfill</a>.</p>
<h2 id="example">Example</h2>
<p><strong>JS</strong></p>
<pre><code class="lang-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]);
</code></pre>
<p><strong>HTML</strong></p>
<pre><code class="lang-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>
</code></pre>
<h2 id="license">License</h2>
<p>MIT © <a href="https://github.com/alferov">Philipp Alferov</a></p>
<!-- endinject -->
<h3 id="demo">Demo</h3>
<p>Download as a text file</p>
<div class="wrapper" ng-controller="DownloadText 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>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/alferov/angular-file-saver">Angular-file-saver</a> is maintained by Philipp Alferov <a href="https://github.com/alferov">@alferov</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>