Javascript ::导出到文本文件

时间:2017-03-31 08:19:55

标签: javascript html button onclick export

<!DOCTYPE html>
<html>

<head>
    <title>&nbsp;</title>
    <meta charset=utf-8>
</head>

<body>

    <table>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
        <tr>
            <td>Line #1</td>
            <td>SLTD</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Line #2</td>
            <td>MKTD</td>
            <td>68</td>
        </tr>
        <tr>
            <td>Line #3</td>
            <td>LRTD</td>
            <td>55</td>
        </tr>
        <tr>
            <td>Line #4</td>
            <td>HAD</td>
            <td>47</td>
        </tr>
    </table>

    <button>Export to text file</button>

    <script>
        var theFirstChilds = document.querySelectorAll('table tr td:first-of-type'), text, i;

        text = "";

        for (i = 0; i < theFirstChilds.length; ++i) {
            text = text + theFirstChilds[i].innerText;
        }

        console.log(text);

        var button = document.getElementsByTagName("button")[0];

        button.addEventListener("click", function() {
            //alert("I want to export the variable text [console.log(text)] to text file");
        });
    </script>

</body>

</html>

一切正常......唯一剩下的就是将其导出到文本文件......

iow ...变量文本中的所有内容都将保存到文本文件中......

单线解决方案将是完美的:)

谢谢!

1 个答案:

答案 0 :(得分:3)

一种方式是:

var saveData = (function () {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
return function (data, fileName) {
    var json = JSON.stringify(data),
        blob = new Blob([json], {type: "octet/stream"}),
        url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
};
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

另一种方法是使用下载元素

var download = document.getElementById('download');
download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(VALUE));
download.setAttribute('download', 'filename.csv');

但是在浏览器兼容性方面也存在其他方式。

使用库

建立图书馆,而不是战争。 FileSaver.js在本机不支持它的浏览器中实现saveAs()FileSaver接口。

如果您需要保存大于blob大小限制的大文件或者没有足够的RAM,那么请查看更高级的StreamSaver.js,它可以将数据直接保存到硬盘驱动器与新流API的强大功能。这将支持进步,取消和知道什么时候写完。

以下代码段允许您生成文件(带有任何扩展名)并下载它而无需联系任何服务器:

var content = "What's up , hello world";
// any kind of extension (.txt,.cpp,.cs,.bat)
var filename = "hello.txt";

var blob = new Blob([content], {
 type: "text/plain;charset=utf-8"
});

saveAs(blob, filename);