|
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 <script async="" src="https://cdn.rawgit.com/eligrey/Blob.js/master/Blob.js"/> |
|
53 <script async="" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"/> |
|
54 <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.js"/> |
|
55 <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/demo/demo.js"/> |
|
56 </body> |
|
57 </html> |