2 <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US-x-Hixie">
\r
4 <meta charset="utf-8"/>
\r
5 <title>FileSaver.js demo</title>
\r
6 <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/eligrey/FileSaver.js/702cd2e820b680f88a0f299e33085c196806fc52/demo/demo.css"/>
\r
9 <h1><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> demo</h1>
\r
11 The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the <code>saveAs()</code> FileSaver interface, without contacting any servers.
\r
13 <section id="image-demo">
\r
14 <h2>Saving an image</h2>
\r
15 <canvas class="input" id="canvas" width="500" height="300"/>
\r
16 <form id="canvas-options">
\r
17 <label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle"/>.png</label>
\r
18 <input type="submit" value="Save"/>
\r
19 <input type="button" id="canvas-clear" value="Clear"/>
\r
22 <section id="text-demo">
\r
23 <h2>Saving text</h2>
\r
24 <textarea class="input" id="text" placeholder="Once upon a time..."/>
\r
25 <form id="text-options">
\r
26 <label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
\r
27 <input type="submit" value="Save"/>
\r
30 <section id="html-demo">
\r
31 <h2>Saving rich text</h2>
\r
32 <div class="input" id="html" contenteditable="">
\r
33 <h3>Some example rich text</h3>
\r
35 <li><del>Plain</del> <ins>Boring</ins> text.</li>
\r
36 <li><em>Emphasized text!</em></li>
\r
37 <li><strong>Strong text!</strong></li>
\r
39 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
\r
40 <circle cx="35" cy="35" r="35" fill="red"/>
\r
41 <text x="10" y="40">image</text>
\r
44 <li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
\r
47 <form id="html-options">
\r
48 <label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>
\r
49 <input type="submit" value="Save"/>
\r
52 <script async="" src="https://cdn.rawgit.com/eligrey/Blob.js/0cef2746414269b16834878a8abc52eb9d53e6bd/Blob.js"/>
\r
53 <script async="" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"/>
\r
54 <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"/>
\r
55 <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/597b6cd0207ce408a6d34890b5b2826b13450714/demo/demo.js"/>
\r