Javascript 将HTML表格以Ascii格式保存到txt文件中_Javascript_Html_Text Files_Ascii Art

Javascript 将HTML表格以Ascii格式保存到txt文件中

javascript html

Javascript 将HTML表格以Ascii格式保存到txt文件中,javascript,html,text-files,ascii-art,Javascript,Html,Text Files,Ascii Art,我用Json文件中的值创建了一个HTML表，如下所示。我将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; colo

我用Json文件中的值创建了一个HTML表，如下所示。我将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艺术？但是我不知道我怎样才能接通。有谁能指导我吗？

如果您只想在生成当前HTML时使用表的当前值转储当前HTML，那么这等于使用表转储DOM，或者更确切地说是DOM的一部分

您可以在Chrome中轻松手动执行此操作：

使用Web检查器F12，转到“元素”选项卡，右键单击代码中的“表格”标记，然后选择“复制为HTML”

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

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

要实现编程，您需要HTML5并使用一些技巧

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

在示例myTable中，提供您的表Id，这样您就可以轻松地只针对表制作一个按钮来开始文档下载，在下载示例中添加一个click listener id

下面是一个代码笔和一些示例表：

你到底想做什么？你想保存一些包含表格的HTML，同时使所有相关的CSS内联，还是什么？因为我现在看到，你已经在同一个文件中有了CSS和HTML，你只需保存文件，下次加载时浏览器就会为你生成所有内容。或者您想用正确的值填充括号进行保存，或者？此html页面的输出是一个格式化的表。我想把这个格式化的表格保存在一个txt文件中。是的，但我想自动创建txt文件。我想有一个像和这样的按钮，用这个函数来创建txt文件。创建文件在哪里？在本地磁盘上还是将其发送到服务器？因为前者可能会让你头疼，浏览器安全设置等等。默认情况下，浏览器不允许在没有用户请求文件的情况下将内容保存到光盘中。也许可以将它发送到服务器，然后从另一个按钮上下载。这是我能做的最好的了。不需要服务器，因为它使用HTML5 blob在旧浏览器上无法工作，并将其绑定到一个链接，然后单击该链接。用户仍然需要确认保存文件，我很确定你不能绕开这一点，这是一个安全问题。唯一的问题是，输出是一个txt文件，等等。对我来说，输出应该是类似Name------LastName------等的东西