11
<!DOCTYPE html>
<html>

<head>
    <title>&nbsp;</title>
    <meta charset=utf-8>
</head>

<body>

    <table>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
        <tr>
            <td>Line #1</td>
            <td>SLTD</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Line #2</td>
            <td>MKTD</td>
            <td>68</td>
        </tr>
        <tr>
            <td>Line #3</td>
            <td>LRTD</td>
            <td>55</td>
        </tr>
        <tr>
            <td>Line #4</td>
            <td>HAD</td>
            <td>47</td>
        </tr>
    </table>

    <button>Export to text file</button>

    <script>
        var theFirstChilds = document.querySelectorAll('table tr td:first-of-type'), text, i;

        text = "";

        for (i = 0; i < theFirstChilds.length; ++i) {
            text = text + theFirstChilds[i].innerText;
        }

        console.log(text);

        var button = document.getElementsByTagName("button")[0];

        button.addEventListener("click", function() {
            //alert("I want to export the variable text [console.log(text)] to text file");
        });
    </script>

</body>

</html>

Everything is working properly... The only thing that left is to export it to a text file...

iow... everything in the variable text would be saved to text file...

Single line solution would be perfect :)

Thanks !

PUG
  • 331
  • 1
  • 4
  • 14

1 Answers1

20

one way would be :

var saveData = (function () {
var a = document.createElement("a");
// document.body.appendChild(a);
// a.style = "display: none";
return function (data, fileName) {
    var json = JSON.stringify(data),
        blob = new Blob([json], {type: "octet/stream"}),
        url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
};
}());

var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";

saveData(data, fileName);

another would be to use download element

var download = document.getElementById('download');
download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(VALUE));
download.setAttribute('download', 'filename.csv');

but there are other ways too with difference in browser compatibility.

Using a library

Make libraries, not the war. FileSaver.js implements the saveAs() FileSaver interface in browsers that do not natively support it.

If you need to save really large files bigger then the blob's size limitation or don't have enough RAM, then have a look at the more advanced StreamSaver.js that can save data directly to the hard drive asynchronously with the power of the new streams API. That will have support for progress, cancelation and knowing when it's done writing.

The following snippet allow you to generate a file (with any extension) and download it without contact any server :

var content = "What's up , hello world";
// any kind of extension (.txt,.cpp,.cs,.bat)
var filename = "hello.txt";

var blob = new Blob([content], {
 type: "text/plain;charset=utf-8"
});

saveAs(blob, filename);
nullqube
  • 2,959
  • 19
  • 18
  • I think those lines are useless (tested with Chrome 80.0.3987.163) `document.body.appendChild(a); a.style = "display: none";` – Cem Polat Apr 16 '20 at 08:16