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>
<section id="faq">
	<h1>FAQ</h1>
	<dl>
		<dt>Why isn't my filename saved?</dt>
		<dd>
			<p>
			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>.
			</p>
		</dd>
	</dl>
</section>
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/Blob.js/master/Blob.min.js"/>
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/canvas-toBlob.js/master/canvas-toBlob.js"/>
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/FileSaver.js"/>
<script type="application/ecmascript" async="" src="https://raw.github.com/eligrey/FileSaver.js/master/demo/demo.js"/>
</body>
</html>

FileSaver.js demo

Saving an image

Saving text