-1

I have created a HTML table with values from Json file like this. I have the json data inline and I create the table using some 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>

Now I need to download this table with the format I have used in css in a txt file. I haven't found everything about how can I save it in txt file. And also I have no idea how can I keep having the format (css). Maybe should I use Ascii Art? But I have no idea how can I make the connection. Can anybody guide me please?

marissalianam
  • 75
  • 5
  • 16
  • What exactly are you trying to do? You wanna save some HTML containing a table while making all relevant CSS inline or what? Cause as I see it now you already have CSS and HTML in the same file, you can just save the file and the browser will generate everything for you next time you load. Or you wanna save with brackets being filled with proper values or? – DanteTheSmith Dec 21 '17 at 14:44
  • The output of this html page is a formatted table. What I want is to save this formatted table in a txt file. – marissalianam Dec 21 '17 at 15:12

1 Answers1

0

If what you desire is simply to dump the current HTML with current values of the table when its generated, that is equal to dumping the DOM, or rather a part of the DOM with the table.

You can do this manually easy in Chrome:

Using the Web Inspector (F12), go to the Elements tab, right click on the your table tag in your code and select 'Copy as HTML'.

Then paste that into a new file and save. You now have your table with proper values as text in a file.

If you save that file as HTML and open it in a browser you should be seeing your table. Depending on the browser, some might require the html and or body element wrapped around to display it.

To do it programmatic, you are gonna need HTML 5 and employ some tricks.

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

Give your table Id so you can easy target only table (in example myTable) Make a button to start document download add a click listener (id in example is download).

Here is a Codepen with some example table: codepen download table to a file

DanteTheSmith
  • 2,937
  • 1
  • 16
  • 31
  • Yes but I want to automatically create the txt file. I want to have a button like Download and with this function to create the txt file. – marissalianam Dec 21 '17 at 15:38
  • To create the file where? On local disc or send it to server? Cause the former might give you some headache, browser security settings and all. Browsers by default are not allowed to save things to your disc without user requesting the file. Might be possible to send it to server, then download it from there on another button. – DanteTheSmith Dec 21 '17 at 15:51
  • This is the best I can do. No server needed it uses HTML5 blob (won't work on old browsers) and binds this to a link then clicks that link. User still has to confirm saving file, I am pretty certain you can't go around that, it's a security issue. – DanteTheSmith Dec 21 '17 at 16:13
  • 1
    The only problem with this is that the output is a txt file with , etc. For me the output should be something like Name---------LastName------ etc – marissalianam Dec 21 '17 at 16:20