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

yufei       1 月, 3 周 前       71

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 上已经有人开源了很多第三方库了

  1. https://github.com/eligrey/FileSaver.js 在不支持 saveAs()FileSaver 接口的浏览器中可以使用这个库来实现

  2. https://github.com/jimmywarting/StreamSaver.js 需要保存更大的文件,或者BLOB的大小限制,或者没有足够的内存,那么你可以看看这个库

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.