|
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 |
|
456
|
13 |
[canvas-toBlob.js](https://github.com/eligrey/canvas-toBlob.js) 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) | |
|
456
|
22 |
| Chrome | Blob | Yes | 345 MiB | None | |
|
|
23 |
| Chrome for Android | Blob | Yes | 345 MiB | None | |
|
442
|
24 |
| IE 10+ | Blob | Yes | 600 MiB | None | |
|
456
|
25 |
| Opera 15+ | Blob | Yes | 345 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 |
|
|
56 |
FileSaver saveAs(in Blob data, in DOMString filename) |
|
|
57 |
``` |
|
|
58 |
|
|
|
59 |
Examples |
|
|
60 |
-------- |
|
|
61 |
|
|
|
62 |
### Saving text |
|
|
63 |
|
|
|
64 |
```js |
|
|
65 |
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); |
|
|
66 |
saveAs(blob, "hello world.txt"); |
|
|
67 |
``` |
|
|
68 |
|
|
456
|
69 |
The standard W3C File API [`Blob`][3] interface is not available in all browsers. |
|
|
70 |
[Blob.js][4] is a cross-browser `Blob` implementation that solves this. |
|
442
|
71 |
|
|
|
72 |
### Saving a canvas |
|
|
73 |
|
|
|
74 |
```js |
|
|
75 |
var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d"); |
|
|
76 |
// draw to canvas... |
|
|
77 |
canvas.toBlob(function(blob) { |
|
|
78 |
saveAs(blob, "pretty image.png"); |
|
|
79 |
}); |
|
|
80 |
``` |
|
|
81 |
|
|
|
82 |
Note: The standard HTML5 `canvas.toBlob()` method is not available in all browsers. |
|
456
|
83 |
[canvas-toBlob.js][5] is a cross-browser `canvas.toBlob()` that polyfills this. |
|
442
|
84 |
|
|
|
85 |
|
|
|
86 |
 |
|
|
87 |
|
|
|
88 |
[1]: http://eligrey.com/demos/FileSaver.js/ |
|
456
|
89 |
[3]: https://developer.mozilla.org/en-US/docs/DOM/Blob |
|
|
90 |
[4]: https://github.com/eligrey/Blob.js |
|
|
91 |
[5]: https://github.com/eligrey/canvas-toBlob.js |
|
442
|
92 |
|
|
|
93 |
Contributing |
|
|
94 |
------------ |
|
|
95 |
|
|
|
96 |
The `FileSaver.js` distribution file is compiled with Uglify.js like so: |
|
|
97 |
|
|
|
98 |
```bash |
|
|
99 |
uglifyjs FileSaver.js --comments /@source/ > FileSaver.min.js |
|
|
100 |
``` |
|
|
101 |
|
|
|
102 |
Please make sure you build a production version before submitting a pull request. |