Javascript:: 导出到文本文件

Question

Javascript:: 导出到文本文件

PUG*_*PUG 8 html javascript export onclick button

<!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>

Run Code Online (Sandbox Code Playgroud)

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

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

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

谢谢！

Answer 1

nul*_*ube 12

一种方法是：

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);

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

但还有其他方法，但浏览器兼容性有所不同。

使用库

创建图书馆，而不是战争。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);

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	19743 次
最近记录：	4 年，9 月前