郭某人的网站

关于 / 留言

WEB 前端技术分享,Javascript 导出数据为 txt 文本文件

前端 js 生成 txt 文件并导出下载


以下代码实现的是点击导出按钮让用户能够下载 test.txt 文件:

<textarea id="ta_text"></textarea>
<button type="button" onclick="saveFile()">导出</button>
<script>
    function exportTxt(fileName, data) {
        if (navigator.userAgent.indexOf("Trident") &amp;amp;gt;= 0) {
            try {
                // IE 10 或以上
                var fileObj = new Blob([data]);
                navigator.msSaveBlob(fileObj, fileName);
            } catch (ex) {
                // IE 9 或以下
                var winSave = window.open();
                winSave.document.open("text", "utf-8");
                winSave.document.write(data);
                winSave.document.execCommand("SaveAs", true, fileName);
                winSave.close();
            }
        } else {
            // Webkit
            var urlObject = window.URL || window.webkitURL || window;
            var export_blob = new Blob([data]);
            var save_link = document.createElement("a");
            save_link.href = urlObject.createObjectURL(export_blob);
            save_link.download = fileName;
            save_link.click();
        }
    }

    function saveFile() {
        var text = document.querySelector("#ta_text").value;
        exportTxt("test.txt", text);
    }
</script>

 

webkit 内核的浏览器会将一个链接到 blob 对象的 uri 视作下载处理,而在 IE 中似乎不能这样,所以需要单独调用 navigator.msSaveBlob 方法,而低版本的 IE 甚至不能支持 blob 对象,需要使用浏览器提供的特定 API 来实现保存功能。

考虑到兼容性等问题,实际的生产环境中不建议使用该方法,对于需要下载的功能建议由后端提供。


最后更新时间:2023/02/17 19:05

给我点电费吧,搬内容也是不容易的

注意!你的赞赏转账请考虑再三后支付,此收款不作任何形式的退款。