Question

我已经创建了一个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>

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

Answer 1

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

您可以在Chrome中手动轻松：

使用Web Inspector（F12），转到“元素”选项卡，右键单击代码中的表格标签，然后选择“复制为HTML”＃39;。

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

如果您将该文件另存为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

使用格式将HTML表格保存到txt文件中（Ascii Art）

1 个答案: