+2
-3
@@ -1,4 +1,4 @@
|
|||||||
/* FileSaver.js
|
/*! FileSaver.js
|
||||||
* A saveAs() FileSaver implementation.
|
* A saveAs() FileSaver implementation.
|
||||||
* 2014-01-24
|
* 2014-01-24
|
||||||
*
|
*
|
||||||
@@ -8,8 +8,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/*global self */
|
/*global self */
|
||||||
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
|
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
|
||||||
plusplus: true */
|
|
||||||
|
|
||||||
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
|
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
FileSaver.js
|
# FileSaver.js
|
||||||
============
|
|
||||||
|
|
||||||
FileSaver.js implements the HTML5 W3C `saveAs()` [FileSaver][1] interface in browsers that do
|
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
|
not natively support it. There is a [FileSaver.js demo][2] that demonstrates saving
|
||||||
@@ -12,8 +11,7 @@ sent to an external server.
|
|||||||
Looking for `canvas.toBlob()` for saving canvases? Check out
|
Looking for `canvas.toBlob()` for saving canvases? Check out
|
||||||
[canvas-toBlob.js](https://github.com/eligrey/canvas-toBlob.js) for a cross-browser implementation.
|
[canvas-toBlob.js](https://github.com/eligrey/canvas-toBlob.js) for a cross-browser implementation.
|
||||||
|
|
||||||
Supported Browsers
|
## Supported Browsers
|
||||||
------------------
|
|
||||||
|
|
||||||
| Browser | Constructs as | Filenames | Max Blob Size | Dependencies |
|
| Browser | Constructs as | Filenames | Max Blob Size | Dependencies |
|
||||||
| -------------- | ------------- | ------------ | ------------- | ------------ |
|
| -------------- | ------------- | ------------ | ------------- | ------------ |
|
||||||
@@ -29,8 +27,11 @@ Supported Browsers
|
|||||||
|
|
||||||
Feature detection is possible:
|
Feature detection is possible:
|
||||||
|
|
||||||
try { var isFileSaverSupported = !!new Blob(); } catch(e){}
|
```js
|
||||||
|
try {
|
||||||
|
var isFileSaverSupported = !!new Blob();
|
||||||
|
} catch (e) {}
|
||||||
|
```
|
||||||
|
|
||||||
### IE < 10
|
### IE < 10
|
||||||
|
|
||||||
@@ -44,29 +45,33 @@ Blobs may be opened instead of saved sometimes—you may have to direct your Saf
|
|||||||
press <kbd>⌘</kbd>+<kbd>S</kbd> to save the file after it is opened. Further information is available
|
press <kbd>⌘</kbd>+<kbd>S</kbd> to save the file after it is opened. Further information is available
|
||||||
[on the issue tracker](https://github.com/eligrey/FileSaver.js/issues/12).
|
[on the issue tracker](https://github.com/eligrey/FileSaver.js/issues/12).
|
||||||
|
|
||||||
Syntax
|
## Syntax
|
||||||
------
|
|
||||||
|
|
||||||
|
```js
|
||||||
FileSaver saveAs(in Blob data, in DOMString filename)
|
FileSaver saveAs(in Blob data, in DOMString filename)
|
||||||
|
```
|
||||||
|
|
||||||
Examples
|
## Examples
|
||||||
--------
|
|
||||||
|
|
||||||
### Saving text
|
### Saving text
|
||||||
|
|
||||||
|
```js
|
||||||
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
|
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
|
||||||
saveAs(blob, "hello world.txt");
|
saveAs(blob, "hello world.txt");
|
||||||
|
```
|
||||||
|
|
||||||
The standard W3C File API [`Blob`][3] interface is not available in all browsers.
|
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.
|
[Blob.js][4] is a cross-browser `Blob` implementation that solves this.
|
||||||
|
|
||||||
### Saving a canvas
|
### Saving a canvas
|
||||||
|
|
||||||
|
```js
|
||||||
var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
|
var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
|
||||||
// draw to canvas...
|
// draw to canvas...
|
||||||
canvas.toBlob(function(blob) {
|
canvas.toBlob(function(blob) {
|
||||||
saveAs(blob, "pretty image.png");
|
saveAs(blob, "pretty image.png");
|
||||||
});
|
});
|
||||||
|
```
|
||||||
|
|
||||||
Note: The standard HTML5 `canvas.toBlob()` method is not available in all browsers.
|
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.
|
[canvas-toBlob.js][5] is a cross-browser `canvas.toBlob()` that polyfills this.
|
||||||
|
|||||||
+8
-13
@@ -2,10 +2,14 @@ html {
|
|||||||
background-color: #DDD;
|
background-color: #DDD;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
width: 900px;
|
width: 900px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
font-family: Verdana, Helvetica, Arial, sans-serif;
|
font-family: Verdana, Helvetica, Arial, sans-serif;
|
||||||
box-shadow: 0 0 5px #000;
|
-webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5);
|
||||||
|
-moz-box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5);
|
||||||
box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5);
|
box-shadow: 0 0 10px 2px rgba(0, 0, 0, .5);
|
||||||
padding: 7px 25px 70px;
|
padding: 7px 25px 70px;
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
@@ -28,28 +32,19 @@ form {
|
|||||||
section {
|
section {
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
}
|
}
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: larger;
|
|
||||||
}
|
|
||||||
#canvas {
|
#canvas {
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
}
|
}
|
||||||
#canvas, #html {
|
#canvas, #html {
|
||||||
border: 1px solid black;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
.filename {
|
.filename {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
#html {
|
#html {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
ms-box-sizing: border-box;
|
|
||||||
webkit-box-sizing: border-box;
|
|
||||||
moz-box-sizing: border-box;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
}
|
||||||
dt:target {
|
|
||||||
background-color: Highlight;
|
|
||||||
color: HighlightText;
|
|
||||||
}
|
|
||||||
|
|||||||
+5
-2
@@ -1,4 +1,4 @@
|
|||||||
/* FileSaver.js demo script
|
/*! FileSaver.js demo script
|
||||||
* 2012-01-23
|
* 2012-01-23
|
||||||
*
|
*
|
||||||
* By Eli Grey, http://eligrey.com
|
* By Eli Grey, http://eligrey.com
|
||||||
@@ -8,6 +8,9 @@
|
|||||||
|
|
||||||
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */
|
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/demo/demo.js */
|
||||||
|
|
||||||
|
/*jshint laxbreak: true, laxcomma: true, smarttabs: true*/
|
||||||
|
/*global saveAs, self*/
|
||||||
|
|
||||||
(function(view) {
|
(function(view) {
|
||||||
"use strict";
|
"use strict";
|
||||||
// The canvas drawing portion of the demo is based off the demo at
|
// The canvas drawing portion of the demo is based off the demo at
|
||||||
@@ -186,7 +189,7 @@ html_options_form.addEventListener("submit", function(event) {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var
|
var
|
||||||
BB = get_blob()
|
BB = get_blob()
|
||||||
, xml_serializer = new XMLSerializer
|
, xml_serializer = new XMLSerializer()
|
||||||
, doc = create_html_doc(html)
|
, doc = create_html_doc(html)
|
||||||
;
|
;
|
||||||
saveAs(
|
saveAs(
|
||||||
|
|||||||
+6
-6
@@ -12,7 +12,7 @@ The following examples demonstrate how it is possible to generate and save any t
|
|||||||
</p>
|
</p>
|
||||||
<section id="image-demo">
|
<section id="image-demo">
|
||||||
<h2>Saving an image</h2>
|
<h2>Saving an image</h2>
|
||||||
<canvas class="input" id="canvas" width="500" height="300"/>
|
<canvas class="input" id="canvas" width="500" height="300"></canvas>
|
||||||
<form id="canvas-options">
|
<form id="canvas-options">
|
||||||
<label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
|
<label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
|
||||||
<input type="submit" value="Save"/>
|
<input type="submit" value="Save"/>
|
||||||
@@ -21,7 +21,7 @@ The following examples demonstrate how it is possible to generate and save any t
|
|||||||
</section>
|
</section>
|
||||||
<section id="text-demo">
|
<section id="text-demo">
|
||||||
<h2>Saving text</h2>
|
<h2>Saving text</h2>
|
||||||
<textarea class="input" id="text" placeholder="Once upon a time..."/>
|
<textarea class="input" id="text" placeholder="Once upon a time..."></textarea>
|
||||||
<form id="text-options">
|
<form id="text-options">
|
||||||
<label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
|
<label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
|
||||||
<input type="submit" value="Save"/>
|
<input type="submit" value="Save"/>
|
||||||
@@ -49,9 +49,9 @@ The following examples demonstrate how it is possible to generate and save any t
|
|||||||
<input type="submit" value="Save"/>
|
<input type="submit" value="Save"/>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/Blob.js/master/Blob.min.js"/>
|
<script src="https://raw.github.com/eligrey/Blob.js/master/Blob.min.js"></script>
|
||||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"/>
|
<script src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
|
||||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.js"/>
|
<script src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
|
||||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.js"/>
|
<script src="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+8
-10
@@ -1,23 +1,21 @@
|
|||||||
{
|
{
|
||||||
"name": "filesaver.js",
|
"name": "filesaver.js",
|
||||||
"version": "2013.1.23",
|
"version": "2013.1.24",
|
||||||
"description": "A saveAs() FileSaver implementation",
|
"description": "A saveAs() FileSaver implementation",
|
||||||
|
"author": "Eli Grey",
|
||||||
|
"license": "MIT/X11",
|
||||||
"main": "FileSaver.js",
|
"main": "FileSaver.js",
|
||||||
"scripts": {
|
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
|
||||||
},
|
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/eligrey/FileSaver.js.git"
|
"url": "https://github.com/eligrey/FileSaver.js.git"
|
||||||
},
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/eligrey/FileSaver.js/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/eligrey/FileSaver.js",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"filesaver",
|
"filesaver",
|
||||||
"saveas",
|
"saveas",
|
||||||
"blob"
|
"blob"
|
||||||
],
|
]
|
||||||
"author": "Eli Grey",
|
|
||||||
"license": "MIT/X11",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/eligrey/FileSaver.js/issues"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user