如何使用 Javascript 在前端生成并下载文件?

HTML5 给 <a> 标签带来了一个新的属性 download，我们可以利用这个属性来实现 JavaScript 在前端生成并下载小文件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>下载小文件</title>
    </head>
    <body>
        <script>
            function download(filename, text) {
                var element = document.createElement('a');
                element.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(text));
                element.setAttribute('download', filename);

                element.style.display = 'none';
                document.body.appendChild(element);

                element.click();

                document.body.removeChild(element);
            }

            function download_it() {
                download("hello.json",'{"name":"www.twle.cn"}');
            }
        </script>
        <a href="javascript:download_it();">下载</a>
    </body>
</html>

从某些方面说，只要支持 HTML5 的浏览器都支持这种下载方式。无需接触任何服务器。

是不是很方面。

如果你的文件比较大，或者要求比较多，上面的方式可能就不支持了。不过不用担心，gayhub 上已经有人开源了很多第三方库了

https://github.com/eligrey/FileSaver.js 在不支持 saveAs() 的 FileSaver 接口的浏览器中可以使用这个库来实现
https://github.com/jimmywarting/StreamSaver.js 需要保存更大的文件，或者BLOB的大小限制，或者没有足够的内存，那么你可以看看这个库