将 HTML 表格保存为具有格式的 txt 文件（Ascii Art）答案

【问题标题】：Save a HTML table into txt file with format (Ascii Art)将 HTML 表格保存为具有格式的 txt 文件（Ascii Art）
【发布时间】：2017-12-21 14:00:38
【问题描述】：

我已经创建了一个 HTML 表，其中包含来自 Json 文件的值，如下所示。我有 json 数据内联，并使用一些 css 创建表。

<style>
table {
width: 60%;
line-height: inherit;
text-align: left;
}
 table td {
padding: 5px;
vertical-align: top;
 }
 table tr.top table td.title {
 font-size: 45px;
 line-height: 45px;
 color: #333;
 }

</style>
</head>
<body>

<div id="box"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script type="mustache/x-tmpl" id="helloTmpl">

<h1>number {{number}}</h1>
 <table cellpadding="0" cellspacing="0" id="t01">
    <tr class="top">
        <td colspan="1">
            <table>
                <tr>
                    <td class="title">

                    </td>
                    <td>
                        Number #: {{number}}
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr class="information">
        <td colspan="1 ">
            <table>
                <tr>
                    <td>Name<br>
                        {{seller.name}}<br>
                    </td>
                </tr>
            </table>
        </td>
    </tr></br>

</table>

</script>

<script>
  var data = {
"number": "123",
"seller": {
    "name": "TestName"
   }
  };
 var tmpl = document.getElementById("helloTmpl").innerHTML;
 var html = Mustache.to_html(tmpl, data);
 var box =  document.getElementById("box");

 box.innerHTML = html;
</script>

现在我需要以我在 css 中使用的格式将这个表格下载到一个 txt 文件中。我还没有找到有关如何将其保存在 txt 文件中的所有信息。而且我也不知道如何保持格式（css）。也许我应该使用 Ascii Art？但我不知道如何建立联系。有人可以指导我吗？

【问题讨论】：

你到底想做什么？您想保存一些包含表格的 HTML，同时使所有相关的 CSS 内联或什么？因为正如我现在看到的那样，您已经在同一个文件中拥有 CSS 和 HTML，您只需保存文件，浏览器将在您下次加载时为您生成所有内容。或者你想用正确的值填充括号保存？
这个html页面的输出是一个格式化的表格。我想要的是将此格式化表格保存在 txt 文件中。

标签： javascript html text-files ascii-art

【解决方案1】：

如果您想要的只是在生成表时将当前 HTML 与表的当前值一起转储，则等于将 DOM 转储，或者更确切地说，将 DOM 的一部分与表一起转储。

您可以手动轻松在 Chrome 中：

使用 Web Inspector (F12)，转到 Elements 选项卡，右键单击代码中的 table 标签，然后选择“Copy as HTML”。

然后将其粘贴到新文件中并保存。现在，您的表格具有适当的值作为文件中的文本。

如果您将该文件保存为 HTML 并在浏览器中打开它，您应该会看到您的表格。根据浏览器的不同，有些可能需要将 html 和/或 body 元素包裹起来才能显示它。

要做到这一点程序化，您将需要 HTML 5 并使用一些技巧。

function saveTextAsFile()
{
    var textToSave = document.getElementById("myTable").innerHTML;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = "generateNameHere";

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    //downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
}

document.getElementById("download").addEventListener("click", saveTextAsFile);

提供您的表格 ID，以便您可以轻松地仅定位表格（例如 myTable）制作一个按钮以开始文档下载添加一个点击监听器（示例中的 id 是下载）。

这是一个带有一些示例表的 Codepen： codepen download table to a file

【讨论】：

是的，但我想自动创建 txt 文件。我想要一个像 Download 这样的按钮，并用这个函数来创建 txt 文件。
在哪里创建文件？在本地磁盘上还是发送到服务器？因为前者可能会让你有些头疼，浏览器安全设置等等。默认情况下，浏览器不允许在没有用户请求文件的情况下将内容保存到您的光盘。可能可以将其发送到服务器，然后在另一个按钮上从那里下载。
这是我能做的最好的了。不需要服务器，它使用 HTML5 blob（不适用于旧浏览器）并将其绑定到链接，然后单击该链接。用户仍然需要确认保存文件，我很确定你不能解决这个问题，这是一个安全问题。
唯一的问题是输出是一个带有、等的 txt 文件。对我来说，输出应该类似于 Name---------LastName ------ 等