|
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 |
|
13 [canvas-toBlob.js][2] for a cross-browser implementation. |
|
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) | |
|
22 | Chrome | Blob | Yes | [500 MiB][3] | None | |
|
23 | Chrome for Android | Blob | Yes | [500 MiB][3] | None | |
|
24 | IE 10+ | Blob | Yes | 600 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) | |
|
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 |
|
69 The standard W3C File API [`Blob`][4] interface is not available in all browsers. |
|
70 [Blob.js][5] is a cross-browser `Blob` implementation that solves this. |
|
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. |
|
83 [canvas-toBlob.js][6] is a cross-browser `canvas.toBlob()` that polyfills this. |
|
84 |
|
85 |
|
86  |
|
87 |
|
88 [1]: http://eligrey.com/demos/FileSaver.js/ |
|
89 [2]: https://github.com/eligrey/canvas-toBlob.js |
|
90 [3]: https://code.google.com/p/chromium/issues/detail?id=375297 |
|
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 |
|
94 |
|
95 Contributing |
|
96 ------------ |
|
97 |
|
98 The `FileSaver.js` distribution file is compiled with Uglify.js like so: |
|
99 |
|
100 ```bash |
|
101 uglifyjs FileSaver.js --comments /@source/ > FileSaver.min.js |
|
102 ``` |
|
103 |
|
104 Please make sure you build a production version before submitting a pull request. |
|
105 |
|
106 Bower Installation |
|
107 ------------------ |
|
108 |
|
109 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`. |