HTML/JS text file output isn't keeping format of my HTML

Question

When I save my form output to file with my save button it doesn't have any format at all.

When I save my log, the text file doesn't have any format and I would like to fix.

Code below: at the very least I'd like to have the text file show up in this format:

  Name Company Time Description of work
  Name Company Time Description of work
  Name Company Time Description of work
  Name Company Time Description of work
  Name Company Time Description of work
  etc...

function getValue() {
            var Items = [];
            var td1 = document.getElementById("displayarea").innerHTML;
            var td2 = document.getElementById("displayarea1").innerHTML;
            var td3 = document.getElementById("displayarea2").innerHTML;
            var td4 = document.getElementById("displayarea3").innerHTML;
            var td5 = document.getElementById("displayarea4").innerHTML;
            Items.push(td1);
            Items.push(td2);
            Items.push(td3);
            Items.push(td4);
            Items.push(td5);
            console.log(Items);
            return Items;
        }

function display()
{
      document.getElementById("displayarea").innerHTML += document.getElementById("fname").value + "<br />";
            document.getElementById("fname").value = "";
            document.getElementById("displayarea1").innerHTML += document.getElementById("lname").value + "<br />";
            document.getElementById("lname").value = "";
            document.getElementById("displayarea2").innerHTML += document.getElementById("sname").value + "<br />";
            document.getElementById("sname").value = "";
            document.getElementById("displayarea3").innerHTML += document.getElementById("pname").value + "<br />";
            document.getElementById("pname").value = "";
            document.getElementById("displayarea4").innerHTML += document.getElementById("jname").value + "<br />";
            document.getElementById("jname").value = "";
}
function saveTextAsFile()
{
    var textToSave = getValue();
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
 
    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();
}
 
function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}
 
function loadFileAsText()
{
    var fileToLoad = document.getElementById("fileToLoad").files[0];
 
    var fileReader = new FileReader();
    fileReader.onload = function(fileLoadedEvent) 
    {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("inputTextToSave").value = textFromFileLoaded;
    };
    fileReader.readAsText(fileToLoad, "UTF-8");
}

<html>
<head>
<script type="text/javascript">

</script type="text/javascript">

</head>

<body>
<body style="background-color:royalblue;text-align:center"> <img src="C:\Users\smarlow1\Desktop\WIPs\pic.png" style="max-width:600%" alt="COVHLTH"> 
    <h2>DATACENTER CHANGE LOG</h2> 
<table bgcolor="royalblue" border="5" align="center">
<tr> <strong>
<td><b>Name</b></td>
<td><input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td><b>Company</b></td>
<td><input type="text" name="lname" id="lname"></td>
</tr>
<tr>
<td><b>Time In</b></td>
<td><input type="Datetime-local" name="pname" id=sname></td>
</tr>
<tr>
<td><b>Time Out</b></td>
<td><input type="Datetime-local" name="pname" id=pname></td>
</tr>
<tr>
<td><b>Description of Work</b></td>
<td><input type="text" name="jname" id="jname"></td>
</strong>
</tr>

<tr>
<td>&nbsp</td>
<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display()"/></button></td>
</tr>
</table>
<table width="400px" align="center" table border="5"> 

<tr style="background-color:#8FBC8F;">
<td align="center"><b>Name</b></td>
<td align="center"><b>Company</b></td>
<td align="center"><b>Time In</b></td>
<td align="center"><b>Time Out</b></td>
<td align="center"><b>Description of Work</b></td>
</tr>
<tr> <strong>
<td align="center"><div id="displayarea"></div></td>
<td align="center"><div id="displayarea1"></div></td>
<td align="center"><div id="displayarea2"></div></td>
<td align="center"><div id="displayarea3"></div></td>
<td align="center"><div id="displayarea4"></div></td>
</strong>
</tr>

<table align="center" border="1">

<tr>
        
        <td><input id="inputFileNameToSaveAs"></input></td>
        <td><button onclick="saveTextAsFile()">Save Text to File</button></td>
        </tr>
</table>
</body>
<tr>
        <td align="bottom right"><button onclick="location.reload()">Clear Log</button></td>
    </tr>
</html>

Also your html has some errors. Please put executable snippet — Alireza Ahmadi
– Alireza Ahmadi, Commented Jul 1, 2021 at 5:45
I have updated the code in a working snippet and at the bottom added an example .txt file with the output I desire. Thanks! — SMARZ
– SMARZ, Commented Jul 1, 2021 at 11:41

Alireza Ahmadi · Accepted Answer · 2021-07-01 12:06:13Z

You just need to change your getValue() function. Because you put your data with <br> tag you need to split them the same way.

   function getValue() {
            var Items = "";
            var td1 = document.getElementById("displayarea").innerHTML.split("<br>");
            var td2 = document.getElementById("displayarea1").innerHTML.split("<br>");
            var td3 = document.getElementById("displayarea2").innerHTML.split("<br>");
            var td4 = document.getElementById("displayarea3").innerHTML.split("<br>");
            var td5 = document.getElementById("displayarea4").innerHTML.split("<br>");

            for (var i = 0; i < td1.length; i++) {
                if (td1[i])
                    Items += td1[i] + " ,";
                if (td2[i])
                    Items += td2[i] + " ,";
                if (td2[i])
                    Items += td2[i] + " ,";
                if (td3[i])
                    Items += td3[i] + " ,";
                if (td4[i])
                    Items += td4[i] + " ";
                Items += "\n";
                
                
            }
            console.log(Items);
            return Items;
        }

        function display() {
            document.getElementById("displayarea").innerHTML += document.getElementById("fname").value + "<br />";
            document.getElementById("fname").value = "";
            document.getElementById("displayarea1").innerHTML += document.getElementById("lname").value + "<br />";
            document.getElementById("lname").value = "";
            document.getElementById("displayarea2").innerHTML += document.getElementById("sname").value + "<br />";
            document.getElementById("sname").value = "";
            document.getElementById("displayarea3").innerHTML += document.getElementById("pname").value + "<br />";
            document.getElementById("pname").value = "";
            document.getElementById("displayarea4").innerHTML += document.getElementById("jname").value + "<br />";
            document.getElementById("jname").value = "";
        }
        function saveTextAsFile() {
            var textToSave = getValue();
            var textToSaveAsBlob = new Blob([textToSave], { type: "text/plain" });
            var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
            var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

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

        function destroyClickedElement(event) {
            document.body.removeChild(event.target);
        }

        function loadFileAsText() {
            var fileToLoad = document.getElementById("fileToLoad").files[0];

            var fileReader = new FileReader();
            fileReader.onload = function (fileLoadedEvent) {
                var textFromFileLoaded = fileLoadedEvent.target.result;
                document.getElementById("inputTextToSave").value = textFromFileLoaded;
            };
            fileReader.readAsText(fileToLoad, "UTF-8");
        }

<body style="background-color:royalblue;text-align:center">

    <img src="C:\Users\smarlow1\Desktop\WIPs\pic.png" style="max-width:600%" alt="COVHLTH">
    <h2>DATACENTER CHANGE LOG</h2>
    <table bgcolor="royalblue" border="5" align="center">
        <tr>
            <td><b>Name</b></td>
            <td><input type="text" name="fname" id="fname"></td>
        </tr>
        <tr>
            <td><b>Company</b></td>
            <td><input type="text" name="lname" id="lname"></td>
        </tr>
        <tr>
            <td><b>Time In</b></td>
            <td><input type="Datetime-local" name="pname" id=sname></td>
        </tr>
        <tr>
            <td><b>Time Out</b></td>
            <td><input type="Datetime-local" name="pname" id=pname></td>
        </tr>
        <tr>
            <td><b>Description of Work</b></td>
            <td><input type="text" name="jname" id="jname"></td>
        </tr>

        <tr>
            <td>&nbsp</td>
            <td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display()" /></button></td>
        </tr>
    </table>
    <table width="400px" align="center" table border="5">

        <tr style="background-color:#8FBC8F;">
            <td align="center"><b>Name</b></td>
            <td align="center"><b>Company</b></td>
            <td align="center"><b>Time In</b></td>
            <td align="center"><b>Time Out</b></td>
            <td align="center"><b>Description of Work</b></td>
        </tr>
        <tr>
            <td align="center"><div id="displayarea"></div></td>
            <td align="center"><div id="displayarea1"></div></td>
            <td align="center"><div id="displayarea2"></div></td>
            <td align="center"><div id="displayarea3"></div></td>
            <td align="center"><div id="displayarea4"></div></td>
        </tr>

        <table align="center" border="1">
            <tr>

                <td><input id="inputFileNameToSaveAs"></input></td>
                <td><button onclick="saveTextAsFile()">Save Text to File</button></td>
            </tr>
        </table>
        <tr>
            <td align="bottom right"><button onclick="location.reload()">Clear Log</button></td>
        </tr>

    </table>

</body>

Thomson Mixab · Accepted Answer · 2021-07-01 04:28:55Z

1

You might need to come up with a custom template format, find and replace the value placeholder, and then save the template result to a file. Example

<html>
<body>
  <p align='left'>%%_val_001_%%</p>
  <p align='left'>%%_val_002_%%</p> 
</body>
</html>

answered Jul 1, 2021 at 4:28

Thomson Mixab

6425 silver badges8 bronze badges

Collectives™ on Stack Overflow

HTML/JS text file output isn't keeping format of my HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related