talksik/FileSaver.js
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #68 from XhmikosR/master

Browse Source 
Minor tweaks
This commit is contained in:
Eli Grey
2014-02-09 14:55:48 -05:00
parent f12e28db63 702cd2e820
commit 2344e2a83b
6 changed files with 123 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
FileSaver.js
+17 -18
View File
@@ -1,15 +1,14 @@
/* FileSaver.js /*! FileSaver.js
* A saveAs() FileSaver implementation. * A saveAs() FileSaver implementation.
* 2014-01-24 * 2014-01-24
* *
* By Eli Grey, http://eligrey.com * By Eli Grey, http://eligrey.com
* License: X11/MIT * License: X11/MIT
* See LICENSE.md * See LICENSE.md
*/ */
/*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 */
@@ -31,7 +30,7 @@ var saveAs = saveAs
} }
, URL = view.URL || view.webkitURL || view , URL = view.URL || view.webkitURL || view
, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a") , save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
, can_use_save_link = !view.externalHost && "download" in save_link , can_use_save_link = !view.externalHost && "download" in save_link
, click = function(node) { , click = function(node) {
var event = doc.createEvent("MouseEvents"); var event = doc.createEvent("MouseEvents");
event.initMouseEvent( event.initMouseEvent(
@@ -42,7 +41,7 @@ var saveAs = saveAs
} }
, webkit_req_fs = view.webkitRequestFileSystem , webkit_req_fs = view.webkitRequestFileSystem
, req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem , req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
, throw_outside = function (ex) { , throw_outside = function(ex) {
(view.setImmediate || view.setTimeout)(function() { (view.setImmediate || view.setTimeout)(function() {
throw ex; throw ex;
}, 0); }, 0);
@@ -101,8 +100,8 @@ var saveAs = saveAs
if (target_view) { if (target_view) {
target_view.location.href = object_url; target_view.location.href = object_url;
} else { } else {
window.open(object_url, "_blank"); window.open(object_url, "_blank");
} }
filesaver.readyState = filesaver.DONE; filesaver.readyState = filesaver.DONE;
dispatch_all(); dispatch_all();
} }
@@ -220,12 +219,12 @@ var saveAs = saveAs
FS_proto.DONE = 2; FS_proto.DONE = 2;
FS_proto.error = FS_proto.error =
FS_proto.onwritestart = FS_proto.onwritestart =
FS_proto.onprogress = FS_proto.onprogress =
FS_proto.onwrite = FS_proto.onwrite =
FS_proto.onabort = FS_proto.onabort =
FS_proto.onerror = FS_proto.onerror =
FS_proto.onwriteend = FS_proto.onwriteend =
null; null;
view.addEventListener("unload", process_deletion_queue, false); view.addEventListener("unload", process_deletion_queue, false);
README.md
+23 -18
View File
@@ -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
------
FileSaver saveAs(in Blob data, in DOMString filename) ```js
FileSaver saveAs(in Blob data, in DOMString filename)
```
Examples ## Examples
--------
### Saving text ### Saving text
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"}); ```js
saveAs(blob, "hello world.txt"); 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. 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
var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d"); ```js
// draw to canvas... var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
canvas.toBlob(function(blob) { // draw to canvas...
saveAs(blob, "pretty image.png"); canvas.toBlob(function(blob) {
}); 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.
demo/demo.css
+9 -14
View File
@@ -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 {
box-sizing: border-box; -webkit-box-sizing: border-box;
ms-box-sizing: border-box; -moz-box-sizing: border-box;
webkit-box-sizing: border-box; box-sizing: border-box;
moz-box-sizing: border-box;
overflow: auto; overflow: auto;
padding: 1em; padding: 1em;
} }
dt:target {
background-color: Highlight;
color: HighlightText;
}
demo/demo.js
+16 -13
View File
@@ -1,13 +1,16 @@
/* 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
* License: X11/MIT * License: X11/MIT
* See LICENSE.md * See LICENSE.md
*/ */
/*! @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
@@ -27,15 +30,15 @@ var
, canvas_options_form = $("canvas-options") , canvas_options_form = $("canvas-options")
, canvas_filename = $("canvas-filename") , canvas_filename = $("canvas-filename")
, canvas_clear_button = $("canvas-clear") , canvas_clear_button = $("canvas-clear")
, text = $("text") , text = $("text")
, text_options_form = $("text-options") , text_options_form = $("text-options")
, text_filename = $("text-filename") , text_filename = $("text-filename")
, html = $("html") , html = $("html")
, html_options_form = $("html-options") , html_options_form = $("html-options")
, html_filename = $("html-filename") , html_filename = $("html-filename")
, ctx = canvas.getContext("2d") , ctx = canvas.getContext("2d")
, drawing = false , drawing = false
, x_points = session.x_points || [] , x_points = session.x_points || []
@@ -70,7 +73,7 @@ var
, stop_drawing = function() { , stop_drawing = function() {
drawing = false; drawing = false;
} }
// Title guesser and document creator available at https://gist.github.com/1059648 // Title guesser and document creator available at https://gist.github.com/1059648
, guess_title = function(doc) { , guess_title = function(doc) {
var var
@@ -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(
@@ -203,10 +206,10 @@ view.addEventListener("unload", function() {
session.y_points = JSON.stringify(y_points); session.y_points = JSON.stringify(y_points);
session.drag_points = JSON.stringify(drag_points); session.drag_points = JSON.stringify(drag_points);
session.canvas_filename = canvas_filename.value; session.canvas_filename = canvas_filename.value;
session.text = text.value; session.text = text.value;
session.text_filename = text_filename.value; session.text_filename = text_filename.value;
session.html = html.innerHTML; session.html = html.innerHTML;
session.html_filename = html_filename.value; session.html_filename = html_filename.value;
}, false); }, false);
demo/index.xhtml
+50 -50
View File
@@ -1,57 +1,57 @@
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>FileSaver.js demo</title> <title>FileSaver.js demo</title>
<link rel="stylesheet" type="text/css" href="demo.css"/> <link rel="stylesheet" type="text/css" href="demo.css"/>
</head> </head>
<body> <body>
<h1><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> demo</h1> <h1><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> demo</h1>
<p> <p>
The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C <code>saveAs()</code> <a href="http://www.w3.org/TR/file-writer-api/#the-filesaver-interface">FileSaver</a> interface, without contacting any servers. The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C <code>saveAs()</code> <a href="http://www.w3.org/TR/file-writer-api/#the-filesaver-interface">FileSaver</a> interface, without contacting any servers.
</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"/>
<input type="button" id="canvas-clear" value="Clear"/> <input type="button" id="canvas-clear" value="Clear"/>
</form> </form>
</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"/>
</form> </form>
</section> </section>
<section id="html-demo"> <section id="html-demo">
<h2>Saving rich text</h2> <h2>Saving rich text</h2>
<div class="input" id="html" contenteditable=""> <div class="input" id="html" contenteditable="">
<h3>Some example rich text</h3> <h3>Some example rich text</h3>
<ul> <ul>
<li><del>Plain</del> <ins>Boring</ins> text.</li> <li><del>Plain</del> <ins>Boring</ins> text.</li>
<li><em>Emphasized text!</em></li> <li><em>Emphasized text!</em></li>
<li><strong>Strong text!</strong></li> <li><strong>Strong text!</strong></li>
<li> <li>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
<circle cx="35" cy="35" r="35" fill="red"/> <circle cx="35" cy="35" r="35" fill="red"/>
<text x="10" y="40">image</text> <text x="10" y="40">image</text>
</svg> </svg>
</li> </li>
<li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li> <li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
</ul> </ul>
</div> </div>
<form id="html-options"> <form id="html-options">
<label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label> <label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>
<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>
package.json
+8 -10
View File
@@ -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"
}
} }