8 FileSaver.js is the solution to saving files on the client-side, and is perfect for |
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 |
9 webapps that need to generate files, or for saving sensitive information that shouldn't be |
10 sent to an external server. |
10 sent to an external server. |
11 |
11 |
12 Looking for `canvas.toBlob()` for saving canvases? Check out |
12 Looking for `canvas.toBlob()` for saving canvases? Check out |
13 [canvas-toBlob.js](https://github.com/eligrey/canvas-toBlob.js) for a cross-browser implementation. |
13 [canvas-toBlob.js][2] for a cross-browser implementation. |
14 |
14 |
15 Supported browsers |
15 Supported browsers |
16 ------------------ |
16 ------------------ |
17 |
17 |
18 | Browser | Constructs as | Filenames | Max Blob Size | Dependencies | |
18 | Browser | Constructs as | Filenames | Max Blob Size | Dependencies | |
19 | -------------- | ------------- | ------------ | ------------- | ------------ | |
19 | -------------- | ------------- | ------------ | ------------- | ------------ | |
20 | Firefox 20+ | Blob | Yes | 800 MiB | None | |
20 | Firefox 20+ | Blob | Yes | 800 MiB | None | |
21 | Firefox < 20 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) | |
21 | Firefox < 20 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) | |
22 | Chrome | Blob | Yes | 345 MiB | None | |
22 | Chrome | Blob | Yes | [500 MiB][3] | None | |
23 | Chrome for Android | Blob | Yes | 345 MiB | None | |
23 | Chrome for Android | Blob | Yes | [500 MiB][3] | None | |
24 | IE 10+ | Blob | Yes | 600 MiB | None | |
24 | IE 10+ | Blob | Yes | 600 MiB | None | |
25 | Opera 15+ | Blob | Yes | 345 MiB | None | |
25 | Opera 15+ | Blob | Yes | 500 MiB | None | |
26 | Opera < 15 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) | |
26 | Opera < 15 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) | |
27 | Safari 6.1+* | Blob | No | ? | None | |
27 | Safari 6.1+* | Blob | No | ? | None | |
28 | Safari < 6 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) | |
28 | Safari < 6 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) | |
29 |
29 |
30 Feature detection is possible: |
30 Feature detection is possible: |
64 ```js |
64 ```js |
65 var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); |
65 var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); |
66 saveAs(blob, "hello world.txt"); |
66 saveAs(blob, "hello world.txt"); |
67 ``` |
67 ``` |
68 |
68 |
69 The standard W3C File API [`Blob`][3] interface is not available in all browsers. |
69 The standard W3C File API [`Blob`][4] interface is not available in all browsers. |
70 [Blob.js][4] is a cross-browser `Blob` implementation that solves this. |
70 [Blob.js][5] is a cross-browser `Blob` implementation that solves this. |
71 |
71 |
72 ### Saving a canvas |
72 ### Saving a canvas |
73 |
73 |
74 ```js |
74 ```js |
75 var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d"); |
75 var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d"); |
78 saveAs(blob, "pretty image.png"); |
78 saveAs(blob, "pretty image.png"); |
79 }); |
79 }); |
80 ``` |
80 ``` |
81 |
81 |
82 Note: The standard HTML5 `canvas.toBlob()` method is not available in all browsers. |
82 Note: The standard HTML5 `canvas.toBlob()` method is not available in all browsers. |
83 [canvas-toBlob.js][5] is a cross-browser `canvas.toBlob()` that polyfills this. |
83 [canvas-toBlob.js][6] is a cross-browser `canvas.toBlob()` that polyfills this. |
84 |
84 |
85 |
85 |
86  |
86  |
87 |
87 |
88 [1]: http://eligrey.com/demos/FileSaver.js/ |
88 [1]: http://eligrey.com/demos/FileSaver.js/ |
89 [3]: https://developer.mozilla.org/en-US/docs/DOM/Blob |
89 [2]: https://github.com/eligrey/canvas-toBlob.js |
90 [4]: https://github.com/eligrey/Blob.js |
90 [3]: https://code.google.com/p/chromium/issues/detail?id=375297 |
91 [5]: https://github.com/eligrey/canvas-toBlob.js |
91 [4]: https://developer.mozilla.org/en-US/docs/DOM/Blob |
|
92 [5]: https://github.com/eligrey/Blob.js |
|
93 [6]: https://github.com/eligrey/canvas-toBlob.js |
92 |
94 |
93 Contributing |
95 Contributing |
94 ------------ |
96 ------------ |
95 |
97 |
96 The `FileSaver.js` distribution file is compiled with Uglify.js like so: |
98 The `FileSaver.js` distribution file is compiled with Uglify.js like so: |