Javascript:: 导出到文本文件答案

【问题标题】：Javascript:: export to text fileJavascript:: 导出到文本文件
【发布时间】：2017-08-25 10:34:13
【问题描述】：

<!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... 变量 text 中的所有内容都将保存到文本文件...

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

谢谢！

【问题讨论】：

标签： javascript html button onclick export

【解决方案1】：

一种方法是：

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。这将支持进度、取消和知道何时完成写入。

以下 sn-p 允许您生成文件（具有任何扩展名）并在不联系任何服务器的情况下下载它：

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

【讨论】：

我认为那些行没用（用 Chrome 80.0.3987.163 测试）document.body.appendChild(a); a.style = "display: none";

【解决方案2】：

对于简单的“txt”文件，您可以使用简单的包fs-browsers。
它为客户端提供了不错且简单的导出方法，不涉及任何服务器。

import { exportFile } from 'fs-browsers';
const onExportClick = (textToExport) => {
  // Export to txt file
  exportFile(textToExport);
}

如果您想更改文件的名称，甚至是类型，您可以通过以下方式轻松完成：

import { exportFile } from 'fs-browsers';
const onExportClick = (textToExport) => {
  // Export to js file called 'file.js'
  exportFile(textToExport, { fileName: 'file.js' });
}

【讨论】：