| author | ymh <ymh.work@gmail.com> |
| Thu, 01 Oct 2015 16:56:54 +0200 | |
| changeset 561 | 5feabdc61980 |
| parent 489 | 7f25a4453865 |
| child 598 | eb4f4eceada0 |
| permissions | -rw-r--r-- |
| 442 | 1 |
FileSaver.js |
2 |
============ |
|
3 |
||
4 |
FileSaver.js implements the HTML5 W3C `saveAs()` FileSaver interface in browsers that do |
|
5 |
not natively support it. There is a [FileSaver.js demo][1] that demonstrates saving |
|
6 |
various media types. |
|
7 |
||
8 |
FileSaver.js is the solution to saving files on the client-side, and is perfect for |
|
9 |
webapps that need to generate files, or for saving sensitive information that shouldn't be |
|
10 |
sent to an external server. |
|
11 |
||
12 |
Looking for `canvas.toBlob()` for saving canvases? Check out |
|
| 489 | 13 |
[canvas-toBlob.js][2] for a cross-browser implementation. |
| 442 | 14 |
|
15 |
Supported browsers |
|
16 |
------------------ |
|
17 |
||
18 |
| Browser | Constructs as | Filenames | Max Blob Size | Dependencies | |
|
19 |
| -------------- | ------------- | ------------ | ------------- | ------------ | |
|
20 |
| Firefox 20+ | Blob | Yes | 800 MiB | None | |
|
21 |
| Firefox < 20 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) | |
|
| 489 | 22 |
| Chrome | Blob | Yes | [500 MiB][3] | None | |
23 |
| Chrome for Android | Blob | Yes | [500 MiB][3] | None | |
|
| 442 | 24 |
| IE 10+ | Blob | Yes | 600 MiB | None | |
| 489 | 25 |
| Opera 15+ | Blob | Yes | 500 MiB | None | |
| 442 | 26 |
| Opera < 15 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) | |
27 |
| Safari 6.1+* | Blob | No | ? | None | |
|
28 |
| Safari < 6 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) | |
|
29 |
||
30 |
Feature detection is possible: |
|
31 |
||
32 |
```js |
|
33 |
try { |
|
34 |
var isFileSaverSupported = !!new Blob; |
|
35 |
} catch (e) {} |
|
36 |
``` |
|
37 |
||
38 |
### IE < 10 |
|
39 |
||
40 |
It is possible to save text files in IE < 10 without Flash-based polyfills. |
|
41 |
See [ChenWenBrian and koffsyrup's `saveTextAs()`](https://github.com/koffsyrup/FileSaver.js#examples) for more details. |
|
42 |
||
43 |
### Safari 6.1+ |
|
44 |
||
45 |
Blobs may be opened instead of saved sometimes—you may have to direct your Safari users to manually |
|
46 |
press <kbd>⌘</kbd>+<kbd>S</kbd> to save the file after it is opened. Using the `application/octet-stream` MIME type to force downloads [can cause issues in Safari](https://github.com/eligrey/FileSaver.js/issues/12#issuecomment-47247096). |
|
47 |
||
48 |
### iOS |
|
49 |
||
50 |
saveAs must be run within a user interaction event such as onTouchDown or onClick; setTimeout will prevent saveAs from triggering. Due to restrictions in iOS saveAs opens in a new window instead of downloading, if you want this fixed please [tell Apple](https://bugs.webkit.org/show_bug.cgi?id=102914) how this bug is affecting you. |
|
51 |
||
52 |
Syntax |
|
53 |
------ |
|
54 |
||
55 |
```js |
|
|
561
5feabdc61980
correct grunt for correct handling of screenfull in umd. publish new version
ymh <ymh.work@gmail.com>
parents:
489
diff
changeset
|
56 |
FileSaver saveAs(Blob data, DOMString filename, optional Boolean disableAutoBOM) |
| 442 | 57 |
``` |
58 |
||
|
561
5feabdc61980
correct grunt for correct handling of screenfull in umd. publish new version
ymh <ymh.work@gmail.com>
parents:
489
diff
changeset
|
59 |
Pass `true` for `disableAutoBOM` if you don't want FileSaver.js to automatically provide Unicode text encoding hints (see: [byte order mark](https://en.wikipedia.org/wiki/Byte_order_mark)). |
|
5feabdc61980
correct grunt for correct handling of screenfull in umd. publish new version
ymh <ymh.work@gmail.com>
parents:
489
diff
changeset
|
60 |
|
| 442 | 61 |
Examples |
62 |
-------- |
|
63 |
||
64 |
### Saving text |
|
65 |
||
66 |
```js |
|
67 |
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); |
|
68 |
saveAs(blob, "hello world.txt"); |
|
69 |
``` |
|
70 |
||
| 489 | 71 |
The standard W3C File API [`Blob`][4] interface is not available in all browsers. |
72 |
[Blob.js][5] is a cross-browser `Blob` implementation that solves this. |
|
| 442 | 73 |
|
74 |
### Saving a canvas |
|
75 |
||
76 |
```js |
|
77 |
var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d"); |
|
78 |
// draw to canvas... |
|
79 |
canvas.toBlob(function(blob) { |
|
80 |
saveAs(blob, "pretty image.png"); |
|
81 |
}); |
|
82 |
``` |
|
83 |
||
84 |
Note: The standard HTML5 `canvas.toBlob()` method is not available in all browsers. |
|
| 489 | 85 |
[canvas-toBlob.js][6] is a cross-browser `canvas.toBlob()` that polyfills this. |
| 442 | 86 |
|
87 |
||
88 |
 |
|
89 |
||
90 |
[1]: http://eligrey.com/demos/FileSaver.js/ |
|
| 489 | 91 |
[2]: https://github.com/eligrey/canvas-toBlob.js |
92 |
[3]: https://code.google.com/p/chromium/issues/detail?id=375297 |
|
93 |
[4]: https://developer.mozilla.org/en-US/docs/DOM/Blob |
|
94 |
[5]: https://github.com/eligrey/Blob.js |
|
95 |
[6]: https://github.com/eligrey/canvas-toBlob.js |
|
| 442 | 96 |
|
97 |
Contributing |
|
98 |
------------ |
|
99 |
||
100 |
The `FileSaver.js` distribution file is compiled with Uglify.js like so: |
|
101 |
||
102 |
```bash |
|
103 |
uglifyjs FileSaver.js --comments /@source/ > FileSaver.min.js |
|
104 |
``` |
|
105 |
||
106 |
Please make sure you build a production version before submitting a pull request. |
|
| 489 | 107 |
|
108 |
Bower Installation |
|
109 |
------------------ |
|
110 |
||
111 |
Please see the [this repo](http://github.com/Teleborder/FileSaver.js) for a bower-compatible fork of FileSaver.js, available under the package name `file-saver.js`. |