blob: 49aff62b7af27e5bf4a13a36e1a0ea01f24b8420 (
plain)
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
|
FileSaver.js
============
FileSaver.js implements the HTML5 W3C `saveAs()` [FileSaver][1] interface in browsers that do
not natively support it. There is a [FileSaver.js demo][2] that demonstrates saving
various media types.
FileSaver.js is the solution to saving files on the client-side, and is perfect for
webapps that need to generate files, or for saving sensitive information that shouldn't be
sent to an external server.
Looking for `canvas.toBlob()` for saving canvases? Check out
[canvas-toBlob.js](https://github.com/eligrey/canvas-toBlob.js) for a cross-browser implementation.
Supported Browsers
------------------
| Browser | Constructs as | Filenames | Max Blob Size | Dependencies |
| -------------- | ------------- | ------------ | ------------- | ------------ |
| Firefox 20+ | Blob | Yes | 800MiB | None |
| Firefox ≤ 19 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) |
| Chrome | Blob | Yes | 345MiB | None |
| Chrome for Android | Blob | Yes | ? | None |
| IE 10+ | Blob | Yes | 600MiB | None |
| Opera Next | Blob | Yes | ? | None |
| Opera < 15 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) |
| Safari 6.1+ | Blob | No | ? | None |
| Safari < 6 | data: URI | No | n/a | [Blob.js](https://github.com/eligrey/Blob.js) |
Feature detection is possible:
try { var isFileSaverSupported = !!new Blob(); } catch(e){}
Syntax
------
FileSaver saveAs(in Blob data, in DOMString filename)
Examples
--------
### Saving text
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
The standard W3C File API [`Blob`][3] interface is not available in all browsers.
[Blob.js][4] is a cross-browser `Blob` implementation that solves this.
### Saving a canvas
var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
// draw to canvas...
canvas.toBlob(function(blob) {
saveAs(blob, "pretty image.png");
});
Note: The standard HTML5 `canvas.toBlob()` method is not available in all browsers.
[canvas-toBlob.js][5] is a cross-browser `canvas.toBlob()` that polyfills this.
### Aborting a save
var filesaver = saveAs(blob, "whatever");
cancel_button.addEventListener("click", function() {
if (filesaver.abort) {
filesaver.abort();
}
}, false);
This isn't that useful unless you're saving very large files (e.g. generated video).
[1]: http://www.w3.org/TR/file-writer-api/#the-filesaver-interface
[2]: http://eligrey.com/demos/FileSaver.js/
[3]: https://developer.mozilla.org/en-US/docs/DOM/Blob
[4]: https://github.com/eligrey/Blob.js
[5]: https://github.com/eligrey/canvas-toBlob.js
|
