Javascript:: 导出到文本文件

Question

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

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

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

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

谢谢！

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

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

How to export JavaScript array info to csv (on client side)?
JavaScript: Create and save file

使用库

创建库，而不是 war。 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);

Answer 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' });
}

Javascript:: 导出到文本文件

Javascript:: export to text file

html

javascript

export

onclick

button

使用库