server/php/basic/public_html/static/lib/FileSaver/README.md
author ymh <ymh.work@gmail.com>
Fri, 19 Jun 2015 13:35:23 +0200
changeset 489 7f25a4453865
parent 488 1324bd8747ff
child 561 5feabdc61980
permissions -rw-r--r--
update renkan server deploiement
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
442
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
FileSaver.js
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
============
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
FileSaver.js implements the HTML5 W3C `saveAs()` FileSaver interface in browsers that do
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
not natively support it. There is a [FileSaver.js demo][1] that demonstrates saving
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
various media types.
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
FileSaver.js is the solution to saving files on the client-side, and is perfect for
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
webapps that need to generate files, or for saving sensitive information that shouldn't be
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
sent to an external server.
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
Looking for `canvas.toBlob()` for saving canvases? Check out
489
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    13
[canvas-toBlob.js][2] for a cross-browser implementation.
442
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
Supported browsers
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
------------------
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
| Browser        | Constructs as | Filenames    | Max Blob Size | Dependencies |
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
| -------------- | ------------- | ------------ | ------------- | ------------ |
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
| Firefox 20+    | Blob          | Yes          | 800 MiB       | None         |
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
| Firefox < 20   | data: URI     | No           | n/a           | [Blob.js](https://github.com/eligrey/Blob.js) |
489
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    22
| Chrome         | Blob          | Yes          | [500 MiB][3]  | None         |
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    23
| Chrome for Android | Blob      | Yes          | [500 MiB][3]  | None         |
442
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
| IE 10+         | Blob          | Yes          | 600 MiB       | None         |
489
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    25
| Opera 15+      | Blob          | Yes          | 500 MiB       | None         |
442
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
| Opera < 15     | data: URI     | No           | n/a           | [Blob.js](https://github.com/eligrey/Blob.js) |
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
| Safari 6.1+*   | Blob          | No           | ?             | None         |
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
| Safari < 6     | data: URI     | No           | n/a           | [Blob.js](https://github.com/eligrey/Blob.js) |
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
Feature detection is possible:
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
```js
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
try {
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
    var isFileSaverSupported = !!new Blob;
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
} catch (e) {}
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
```
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
### IE < 10
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
It is possible to save text files in IE < 10 without Flash-based polyfills.
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
See [ChenWenBrian and koffsyrup's `saveTextAs()`](https://github.com/koffsyrup/FileSaver.js#examples) for more details.
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
### Safari 6.1+
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
Blobs may be opened instead of saved sometimes—you may have to direct your Safari users to manually
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    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).
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
### iOS
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    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.
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
Syntax
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
------
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
```js
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
FileSaver saveAs(in Blob data, in DOMString filename)
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
```
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
Examples
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
--------
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
### Saving text
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
```js
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
saveAs(blob, "hello world.txt");
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
```
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
489
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    69
The standard W3C File API [`Blob`][4] interface is not available in all browsers.
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    70
[Blob.js][5] is a cross-browser `Blob` implementation that solves this.
442
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    71
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
### Saving a canvas
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
```js
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
// draw to canvas...
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
canvas.toBlob(function(blob) {
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
    saveAs(blob, "pretty image.png");
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
});
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
```
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
Note: The standard HTML5 `canvas.toBlob()` method is not available in all browsers.
489
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    83
[canvas-toBlob.js][6] is a cross-browser `canvas.toBlob()` that polyfills this.
442
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
![Tracking image](https://in.getclicky.com/212712ns.gif)
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    87
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
  [1]: http://eligrey.com/demos/FileSaver.js/
489
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    89
  [2]: https://github.com/eligrey/canvas-toBlob.js
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    90
  [3]: https://code.google.com/p/chromium/issues/detail?id=375297
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    91
  [4]: https://developer.mozilla.org/en-US/docs/DOM/Blob
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    92
  [5]: https://github.com/eligrey/Blob.js
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
    93
  [6]: https://github.com/eligrey/canvas-toBlob.js
442
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    95
Contributing
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    96
------------
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    97
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
The `FileSaver.js` distribution file is compiled with Uglify.js like so:
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
    99
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
   100
```bash
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
uglifyjs FileSaver.js --comments /@source/ > FileSaver.min.js
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
```
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
   103
adb907bba956 add server php example
ymh <ymh.work@gmail.com>
parents:
diff changeset
   104
Please make sure you build a production version before submitting a pull request.
489
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
   105
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
   106
Bower Installation
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
   107
------------------
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
   108
7f25a4453865 update renkan server deploiement
ymh <ymh.work@gmail.com>
parents: 488
diff changeset
   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`.