FileSaver.js demo

+ The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C saveAs() FileSaver interface, without contacting any servers. +

Saving text

+        <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"/>
+        </form>
+    </section>
+    <section id="html-demo">
+        <h2>Saving rich text</h2>
+        <div class="input" id="html" contenteditable="">
+            <h3>Some example rich text</h3>
+            <ul>
+                <li><del>Plain</del> <ins>Boring</ins> text.</li>
+                <li><em>Emphasized text!</em></li>
+                <li><strong>Strong text!</strong></li>
+                <li>
+                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
+                        <circle cx="35" cy="35" r="35" fill="red"/>
+                        <text x="10" y="40">image</text>
+                    </svg>
+                </li>
+                <li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
+            </ul>
+        </div>
+        <form id="html-options">
+            <label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document"/>.xhtml</label>
+            <input type="submit" value="Save"/>
+        </form>
+    </section>
+    <script async="" src="https://cdn.rawgit.com/eligrey/Blob.js/master/Blob.js"/>
+    <script async="" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"/>
+    <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/FileSaver.js"/>
+    <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/master/demo/demo.js"/>
+</body>
+</html>

FileSaver.js demo

Saving an image

Saving text