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 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