| 9 |
lars |
1 |
<!DOCTYPE html>
|
|
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
|
|
|
3 |
<head>
|
|
|
4 |
<meta charset="utf-8"/>
|
|
|
5 |
<title>FileSaver.js demo</title>
|
|
|
6 |
<link rel="stylesheet" type="text/css" href="demo.css"/>
|
|
|
7 |
</head>
|
|
|
8 |
<body>
|
|
|
9 |
<h1><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> demo</h1>
|
|
|
10 |
<p>
|
|
|
11 |
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.
|
|
|
12 |
</p>
|
|
|
13 |
<section id="image-demo">
|
|
|
14 |
<h2>Saving an image</h2>
|
|
|
15 |
<canvas class="input" id="canvas" width="500" height="300"/>
|
|
|
16 |
<form id="canvas-options">
|
|
|
17 |
<label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
|
|
|
18 |
<input type="submit" value="Save"/>
|
|
|
19 |
<input type="button" id="canvas-clear" value="Clear"/>
|
|
|
20 |
</form>
|
|
|
21 |
</section>
|
|
|
22 |
<section id="text-demo">
|
|
|
23 |
<h2>Saving text</h2>
|
|
|
24 |
<textarea class="input" id="text" placeholder="Once upon a time..."/>
|
|
|
25 |
<form id="text-options">
|
|
|
26 |
<label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
|
|
|
27 |
<input type="submit" value="Save"/>
|
|
|
28 |
</form>
|
|
|
29 |
</section>
|
|
|
30 |
<section id="html-demo">
|
|
|
31 |
<h2>Saving rich text</h2>
|
|
|
32 |
<div class="input" id="html" contenteditable="">
|
|
|
33 |
<h3>Some example rich text</h3>
|
|
|
34 |
<ul>
|
|
|
35 |
<li><del>Plain</del> <ins>Boring</ins> text.</li>
|
|
|
36 |
<li><em>Emphasized text!</em></li>
|
|
|
37 |
<li><strong>Strong text!</strong></li>
|
|
|
38 |
<li>
|
|
|
39 |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
|
|
|
40 |
<circle cx="35" cy="35" r="35" fill="red"/>
|
|
|
41 |
<text x="10" y="40">image</text>
|
|
|
42 |
</svg>
|
|
|
43 |
</li>
|
|
|
44 |
<li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
|
|
|
45 |
</ul>
|
|
|
46 |
</div>
|
|
|
47 |
<form id="html-options">
|
|
|
48 |
<label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>
|
|
|
49 |
<input type="submit" value="Save"/>
|
|
|
50 |
</form>
|
|
|
51 |
</section>
|
|
|
52 |
<section id="faq">
|
|
|
53 |
<h1>FAQ</h1>
|
|
|
54 |
<dl>
|
|
|
55 |
<dt>Why isn't my filename saved?</dt>
|
|
|
56 |
<dd>
|
|
|
57 |
<p>
|
|
|
58 |
Saving with filenames is only available in browsers that natively support <a href="http://www.w3.org/TR/file-writer-api/#the-filesaver-interface"><code>FileSaver</code></a> or browsers like <a href="http://www.chromium.org/getting-involved/dev-channel">Google Chrome 14 dev</a> and <a href="http://tools.google.com/dlpage/chromesxs">Google Chrome Canary</a>, that support <a href="http://developers.whatwg.org/links.html#downloading-resources"><code><![CDATA[<a>.@download]]></code></a> or <a href="http://www.w3.org/TR/file-system-api/#using-localfilesystem"><code>LocalFileSystem</code></a>.
|
|
|
59 |
</p>
|
|
|
60 |
</dd>
|
|
|
61 |
</dl>
|
|
|
62 |
</section>
|
|
|
63 |
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/Blob.js/master/Blob.min.js"/>
|
|
|
64 |
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"/>
|
|
|
65 |
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.js"/>
|
|
|
66 |
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.js"/>
|
|
|
67 |
</body>
|
|
|
68 |
</html>
|