+2
-3
@@ -1,4 +1,4 @@
|
||||
/* FileSaver.js
|
||||
/*! FileSaver.js
|
||||
* A saveAs() FileSaver implementation.
|
||||
* 2014-01-24
|
||||
*
|
||||
@@ -8,8 +8,7 @@
|
||||
*/
|
||||
|
||||
/*global self */
|
||||
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
|
||||
plusplus: true */
|
||||
/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
|
||||
|
||||
/*! @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
|
||||
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
|
||||
[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 |
|
||||
| -------------- | ------------- | ------------ | ------------- | ------------ |
|
||||
@@ -29,8 +27,11 @@ Supported Browsers
|
||||
|
||||
Feature detection is possible:
|
||||
|
||||
try { var isFileSaverSupported = !!new Blob(); } catch(e){}
|
||||
|
||||
```js
|
||||
try {
|
||||
var isFileSaverSupported = !!new Blob();
|
||||
} catch (e) {}
|
||||
```
|
||||
|
||||
### 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
|
||||
[on the issue tracker](https://github.com/eligrey/FileSaver.js/issues/12).
|
||||
|
||||
Syntax
|
||||
------
|
||||
## Syntax
|
||||
|
||||
```js
|
||||
FileSaver saveAs(in Blob data, in DOMString filename)
|
||||
```
|
||||
|
||||
Examples
|
||||
--------
|
||||
## Examples
|
||||
|
||||
### Saving text
|
||||
|
||||
```js
|
||||
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
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
+8
-13
@@ -2,10 +2,14 @@ html {
|
||||
background-color: #DDD;
|
||||
}
|
||||
body {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
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);
|
||||
padding: 7px 25px 70px;
|
||||
background-color: #FFF;
|
||||
@@ -28,28 +32,19 @@ form {
|
||||
section {
|
||||
margin-top: 40px;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
font-size: larger;
|
||||
}
|
||||
#canvas {
|
||||
cursor: crosshair;
|
||||
}
|
||||
#canvas, #html {
|
||||
border: 1px solid black;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.filename {
|
||||
text-align: right;
|
||||
}
|
||||
#html {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-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;
|
||||
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
|
||||
*
|
||||
* By Eli Grey, http://eligrey.com
|
||||
@@ -8,6 +8,9 @@
|
||||
|
||||
/*! @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) {
|
||||
"use strict";
|
||||
// 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();
|
||||
var
|
||||
BB = get_blob()
|
||||
, xml_serializer = new XMLSerializer
|
||||
, xml_serializer = new XMLSerializer()
|
||||
, doc = create_html_doc(html)
|
||||
;
|
||||
saveAs(
|
||||
|
||||
+6
-6
@@ -12,7 +12,7 @@ The following examples demonstrate how it is possible to generate and save any t
|
||||
</p>
|
||||
<section id="image-demo">
|
||||
<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">
|
||||
<label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
|
||||
<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 id="text-demo">
|
||||
<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">
|
||||
<label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
|
||||
<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"/>
|
||||
</form>
|
||||
</section>
|
||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/Blob.js/master/Blob.min.js"/>
|
||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"/>
|
||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.js"/>
|
||||
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.js"/>
|
||||
<script src="https://raw.github.com/eligrey/Blob.js/master/Blob.min.js"></script>
|
||||
<script src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"></script>
|
||||
<script src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.js"></script>
|
||||
<script src="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+8
-10
@@ -1,23 +1,21 @@
|
||||
{
|
||||
"name": "filesaver.js",
|
||||
"version": "2013.1.23",
|
||||
"version": "2013.1.24",
|
||||
"description": "A saveAs() FileSaver implementation",
|
||||
"author": "Eli Grey",
|
||||
"license": "MIT/X11",
|
||||
"main": "FileSaver.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "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": [
|
||||
"filesaver",
|
||||
"saveas",
|
||||
"blob"
|
||||
],
|
||||
"author": "Eli Grey",
|
||||
"license": "MIT/X11",
|
||||
"bugs": {
|
||||
"url": "https://github.com/eligrey/FileSaver.js/issues"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user