FileSaver.js demo

下面的例子演示了如何在浏览器中生成和保存任何类型的数据是可能的 saveAs()filesaver接口，而不接触任何服务器.

保存文本

<form id="text-options">
            <label>文件名: <input type="text" class="filename" id="text-filename" placeholder="a plain document"/>.txt</label>
            <input type="submit" value="保存"/>
        </form>
    </section>
    <section id="html-demo">
        <h2>Saving rich text</h2>
        <div class="input" id="html" contenteditable="">
            <h3>一些例子丰富的文本</h3>
            <ul>
                <li><del>Plain</del> <ins>Boring</ins> text.</li>
                <li><em>强调文本!</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">图片</text>
                    </svg>
                </li>
                <li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
            </ul>
        </div>
        <form id="html-options">
            <label>文件名: <input type="text" class="filename" id="html-filename" placeholder="丰富的文档"/>.xhtml</label>
            <input type="submit" value="Save"/>
        </form>
    </section>
    <script async="" src="https://cdn.rawgit.com/eligrey/Blob.js/0cef2746414269b16834878a8abc52eb9d53e6bd/Blob.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/canvas-toBlob.js/f1a01896135ab378aa5c0118eadd81da55e698d8/canvas-toBlob.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"/>
    <script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/597b6cd0207ce408a6d34890b5b2826b13450714/demo/demo.js"/>
</body>
</html>

FileSaver.js demo

保存图片

保存文本