Export table as file.txt in JavaScript

Question

I have a table with data and I need to export it as file.txt.I have tried few solutions that I found but nothing works good, it was successful just when I export the table as file.xls. I need to finish this with Javascript. I have csv file with data that I use to insert in the table, but I don't know where to upload here. It is iris dataset csv, which you can find https://gist.github.com/curran/a08a1080b88344b0c8a7.

$(document).ready(function () {
    $.ajax({
        url: "iris_data.csv",
        dataType: "text",
        success: function (data) {
            var iris_data = data.split(/\r?\n|\r/);
            var jsonObj = [];
            for (var i = 0; i < iris_data.length; i++) {
                var data = iris_data[i].split('\n');
                var obj = {};
                for (var j = 0; j < data.length; j++) {
                    obj = data[j].trim();
                    jsonObj.push(obj);
                }
            }
            var arr = JSON.stringify(jsonObj); 
            arr = (arr.split('["')) 
            arr = arr.toString() 
            arr = (arr.split("]")) 
            arr = arr.toString()
            arr1 = arr.split('","'); 

            function fillIn() {
                var N_setosa = 0;
                var N_versicolor = 0;
                var N_virginica = 0;
                var newSetosaArr = [];
                var newVersicolorArr = [];
                var newVirginicaArr = [];
                var subString;
                for (var i = 0; i < arr1.length; i++) {
                    if (arr1[i].includes('Iris-setosa')) {
                        subString = arr1[i];
                        var subArray = subString.split(",")
                        if (subArray[0] === "") {
                            var item = subArray[1];
                            newSetosaArr.push(item)
                        } else {
                            newSetosaArr.push(subArray[0]);
                        }


                        N_setosa++;
                        document.getElementById('N_setosa').innerHTML = N_setosa;
                    } else if (arr1[i].includes('Iris-versicolor')) {
                        subString = arr1[i];
                        var subArray = subString.split(",");
                        newVersicolorArr.push(subArray[0]);
                        document.getElementById('N_versicolor').innerHTML = newVersicolorArr.length;
                        N_versicolor++;
                    } else if (arr1[i].includes('Iris-virginica')) {
                        subString = arr1[i];
                        var subArray = subString.split(",");
                        newVirginicaArr.push(subArray[0]);
                        document.getElementById('N_virginica').innerHTML = newVirginicaArr.length;
                        N_virginica++;
                    }
                    document.getElementById('N_total').innerHTML = N_setosa + N_versicolor + N_virginica;
                }


                function getMin(array) {
                    var result = [];
                    for (var i = 0; i < array.length; i++) {
                        if ((array[i][0] !== "") && !(isNaN(parseFloat(array[i][0])))) {
                            var item = parseFloat(array[i]);
                            result.push(item);
                        } else console.log("fail")
                    }
                    return Math.min(...result);
                }
                document.getElementById('min_setosa').innerHTML = getMin(newSetosaArr);
                document.getElementById('min_versicolor').innerHTML = getMin(newVersicolorArr);
                document.getElementById('min_virginica').innerHTML = getMin(newVirginicaArr);
                document.getElementById('min_total').innerHTML = getMin(newSetosaArr) + getMin(newVersicolorArr) + getMin(newVirginicaArr);

                function getMax(array) {
                    var result = [];
                    for (var i = 0; i < array.length; i++) {
                        if ((array[i][0] !== "") && !(isNaN(parseFloat(array[i][0])))) {
                            var item = parseFloat(array[i]);
                            result.push(item);
                        } else console.log("fail")
                    }
                    return Math.max(...result);
                }

                document.getElementById('max_setosa').innerHTML = getMax(newSetosaArr);
                document.getElementById('max_versicolor').innerHTML = getMax(newVersicolorArr);
                document.getElementById('max_virginica').innerHTML = getMax(newVirginicaArr);
                var sum = getMax(newSetosaArr) + getMax(newVersicolorArr) + getMax(newVirginicaArr);
                document.getElementById('max_total').innerHTML = sum.toFixed(1);

                function getMedian(array) {
                    var result = [];
                    for (var i = 0; i < array.length; i++) {
                        if ((array[i][0] !== "") && !(isNaN(parseFloat(array[i][0])))) {
                            var item = parseFloat(array[i]);
                            result.push(item);
                        } else console.log("fail")
                    }
                    arr = [...result].sort((a, b) => a - b)
                    return (arr[arr.length - 1 >> 1] + arr[arr.length >> 1]) / 2;
                }
                document.getElementById('median_setosa').innerHTML = getMedian(newSetosaArr);
                document.getElementById('median_versicolor').innerHTML = getMedian(newVersicolorArr);
                document.getElementById('median_virginica').innerHTML = getMedian(newVirginicaArr);
                var sum = getMedian(newSetosaArr) + getMedian(newVersicolorArr) + getMedian(newVirginicaArr);
                document.getElementById('median_total').innerHTML = sum.toFixed(1);

                function getMean(array) {
                    var result = [];
                    for (var i = 0; i < array.length; i++) {
                        if ((array[i][0] !== "") && !(isNaN(parseFloat(array[i][0])))) {
                            var item = parseFloat(array[i]);
                            result.push(item);
                        } else console.log("fail")
                    }
                    var sum = result.reduce((a, b) => a + b, 0)
                    var konacno = sum / result.length;
                    return konacno;
                }
                document.getElementById('mean_setosa').innerHTML = getMean(newSetosaArr).toFixed(1);
                document.getElementById('mean_versicolor').innerHTML = getMean(newVersicolorArr).toFixed(1);
                document.getElementById('mean_virginica').innerHTML = getMean(newVirginicaArr).toFixed(1);
                var sum = getMean(newSetosaArr) + getMean(newVersicolorArr) + getMean(newVirginicaArr);
                document.getElementById('mean_total').innerHTML = sum.toFixed(1);

                function getStDeviation(array) {
                    var result = [];
                    for (var i = 0; i < array.length; i++) {
                        if ((array[i][0] !== "") && !(isNaN(parseFloat(array[i][0])))) {
                            var item = parseFloat(array[i]);
                            result.push(item);
                        } else console.log("fail")
                    }
                    const n = result.length;
                    const mean = result.reduce((a, b) => a + b) / n;
                    const s = Math.sqrt(array.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / n);
                    return s;
                }
                document.getElementById('sd_setosa').innerHTML = getStDeviation(newSetosaArr).toFixed(1);
                document.getElementById('sd_versicolor').innerHTML = getStDeviation(newVersicolorArr).toFixed(1);
                document.getElementById('sd_virginica').innerHTML = getStDeviation(newVirginicaArr).toFixed(1);
                var sum = getStDeviation(newSetosaArr) + getStDeviation(newVersicolorArr) + getStDeviation(newVirginicaArr);
                document.getElementById('sd_total').innerHTML = sum.toFixed(1)
                var first = [];
                var second = [];
                var third = [];
                var fourth = [];

                function izrSetosa(arr) {
                    var result = [];
                    for (var i = 0; i < arr.length; i++) {
                        if ((arr[i][0] !== "") && !(isNaN(parseFloat(arr[i][0])))) {
                            var item = parseFloat(arr[i]);
                            result.push(item);
                        }
                    }
                    for (var i = 0; i < result.length; i++) {
                        if (result[i][0] !== "" && result[i] < 5) {
                            first.push(result[i])
                            document.getElementById('first_setosa').innerHTML = first.length + ' ' + '(' + (first.length * 100 / N_setosa).toFixed(1) + ")";
                        } else if (result[i] >= 5 && result[i] < 6) {
                            second.push(result[i])
                            document.getElementById('second_setosa').innerHTML = second.length + ' ' + '(' + (second.length * 100 / N_setosa).toFixed(1) + ")";
                        } else if (result[i] >= 6 && result[i] < 7) {
                            third.push(result[i])
                            document.getElementById('third_setosa').innerHTML = third.length + ' ' + '(' + (third.length * 100 / N_setosa).toFixed(1) + ")";
                        } else if (result[i] >= 7) {
                            fourth.push(result[i])
                            document.getElementById('fourth_setosa').innerHTML = fourth.length + ' ' + '(' + (fourth.length * 100 / N_setosa).toFixed(1) + ")";
                        }
                    }
                    return first, second, third, fourth;
                }
                izrSetosa(newSetosaArr)
                var firstVer = [];
                var secondVer = [];
                var thirdVer = [];
                var fourthVer = [];

                function izrVersicolor(arr) {
                    var result = [];
                    for (var i = 0; i < arr.length; i++) {
                        if ((arr[i][0] !== "") && !(isNaN(parseFloat(arr[i][0])))) {
                            var item = parseFloat(arr[i]);
                            result.push(item);
                        }
                    }
                    for (var i = 0; i < result.length; i++) {
                        if (result[i][0] !== "" && result[i] < 5) {
                            firstVer.push(result[i])
                            document.getElementById('first_versicolor').innerHTML = firstVer.length + ' ' + '(' + (firstVer.length * 100 / N_versicolor).toFixed(1) + ")";
                        } else if (result[i] >= 5 && result[i] < 6) {
                            secondVer.push(result[i])
                            document.getElementById('second_versicolor').innerHTML = secondVer.length + ' ' + '(' + (secondVer.length * 100 / N_versicolor).toFixed(1) + ")";
                        } else if (result[i] >= 6 && result[i] < 7) {
                            thirdVer.push(result[i])
                            document.getElementById('third_versicolor').innerHTML = thirdVer.length + ' ' + '(' + (thirdVer.length * 100 / N_versicolor).toFixed(1) + ")";
                        } else if (result[i] >= 7) {
                            fourthVer.push(result[i])
                            document.getElementById('fourth_versicolor').innerHTML = fourthVer.length + ' ' + '(' + (fourthVer.length * 100 / N_versicolor).toFixed(1) + ")";
                        }
                    }
                    return firstVer, secondVer, thirdVer, fourthVer;
                }
                izrVersicolor(newVersicolorArr)
                var firstVir = [];
                var secondVir = [];
                var thirdVir = [];
                var fourthVir = [];

                function izrVirginica(arr) {
                    var result = [];
                    for (var i = 0; i < arr.length; i++) {
                        if ((arr[i][0] !== "") && !(isNaN(parseFloat(arr[i][0])))) {
                            var item = parseFloat(arr[i]);
                            result.push(item);
                        }
                    }
                    for (var i = 0; i < result.length; i++) {
                        if (result[i][0] !== "" && result[i] < 5) {
                            firstVir.push(result[i])
                            document.getElementById('first_virginica').innerHTML = firstVir.length + ' ' + '(' + (firstVir.length * 100 / N_virginica).toFixed(1) + ")";
                        } else if (result[i] >= 5 && result[i] < 6) {
                            secondVir.push(result[i])
                            document.getElementById('second_virginica').innerHTML = secondVir.length + ' ' + '(' + (secondVir.length * 100 / N_virginica).toFixed(1) + ")";
                        } else if (result[i] >= 6 && result[i] < 7) {
                            thirdVir.push(result[i])
                            document.getElementById('third_virginica').innerHTML = thirdVir.length + ' ' + '(' + (thirdVir.length * 100 / N_virginica).toFixed(1) + ")";
                        } else if (result[i] >= 7) {
                            fourthVir.push(result[i])
                            document.getElementById('fourth_virginica').innerHTML = fourthVir.length + ' ' + '(' + (fourthVir.length * 100 / N_virginica).toFixed(1) + ")";
                        }
                    }
                    return firstVir, secondVir, thirdVir, fourthVir;
                }
                izrVirginica(newVirginicaArr);
                document.getElementById('fourth_total').innerHTML = fourthVir.length + fourthVer.length + fourth.length + ' ' + '(' + ((fourthVir.length + fourthVer.length + fourth.length) * 100 / (N_setosa + N_versicolor + N_virginica)).toFixed(1) + ")";
                document.getElementById('third_total').innerHTML = thirdVir.length + thirdVer.length + third.length + ' ' + '(' + ((thirdVir.length + thirdVer.length + third.length) * 100 / (N_setosa + N_versicolor + N_virginica)).toFixed(1) + ")";
                document.getElementById('second_total').innerHTML = secondVir.length + secondVer.length + second.length + ' ' + '(' + ((secondVir.length + secondVer.length + second.length) * 100 / (N_setosa + N_versicolor + N_virginica)).toFixed(1) + ")";
                document.getElementById('first_total').innerHTML = firstVir.length + firstVer.length + first.length + ' ' + '(' + ((firstVir.length + firstVer.length + first.length) * 100 / (N_setosa + N_versicolor + N_virginica)).toFixed(1) + ")";
            }
            return fillIn();
        }
    });
});

function exportF(elem) {
    var table = document.getElementById("table");
    var html = table.outerHTML;
    var url = 'data:application/vnd.ms-excel,' + escape(html); 
    elem.setAttribute("href", url);
    elem.setAttribute("download", "export.xls"); 
    return false;
}

    <!DOCTYPE html>
    <html>
       
    <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
        <script type="text/javascript" src="solution.js"></script>
       
         </head>
    <body> 

      <style type="text/css">
        .tg  {border-collapse:collapse;border-spacing:0;}
        .tg td{font-family:Arial, sans-serif;font-size:14px;padding:20px 77px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
        .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:20px 77px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
        .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
        </style>
        <table class="tg" id='table'>
          <tr>
            <th class="tg-0pky"></th>
            <th class="tg-0pky">Iris Setosa </th>
            <th class="tg-0pky">Iris Versicolor </th>
            <th class="tg-0pky">Iris Virginica</th>
            <th class="tg-0pky">Total</th>

          </tr>
          <tr>
            <td class="tg-0pky">Sepal length(cm)</td>
          </tr>
          <tr>
            <td class="tg-0pky">N</td>
            <td class="tg-0pky" id="N_setosa"></td>
            <td class="tg-0pky"id="N_versicolor"></td>
            <td class="tg-0pky"id="N_virginica"></td>
            <td class="tg-0pky"id="N_total"></td>

          </tr>
          <tr>
            <td class="tg-0pky">Min</td>
            <td class="tg-0pky" id="min_setosa"></td>
            <td class="tg-0pky"id="min_versicolor"></td>
            <td class="tg-0pky"id="min_virginica"></td>
            <td class="tg-0pky"id="min_total"></td>
          </tr>
          <tr>
            <td class="tg-0pky">Max</td>
            <td class="tg-0pky" id="max_setosa"></td>
            <td class="tg-0pky"id="max_versicolor"></td>
            <td class="tg-0pky"id="max_virginica"></td>
            <td class="tg-0pky"id="max_total"></td>
          </tr>
          <tr>
            <td class="tg-0pky">Median</td>
            <td class="tg-0pky" id="median_setosa"></td>
            <td class="tg-0pky"id="median_versicolor"></td>
            <td class="tg-0pky"id="median_virginica"></td>
            <td class="tg-0pky"id="median_total"></td>
          </tr>
          <tr>
            <td class="tg-0pky">Mean</td>
            <td class="tg-0pky" id="mean_setosa"></td>
            <td class="tg-0pky"id="mean_versicolor"></td>
            <td class="tg-0pky"id="mean_virginica"></td>
            <td class="tg-0pky"id="mean_total"></td>
          </tr>
          <tr>
            <td class="tg-0pky">standard deviation </td>
            <td class="tg-0pky" id="sd_setosa"></td>
            <td class="tg-0pky"id="sd_versicolor"></td>
            <td class="tg-0pky"id="sd_virginica"></td>
            <td class="tg-0pky"id="sd_total"></td>
          </tr>

          <tr>
            <td class="tg-0pky">Sepal length(%)</td>
          </tr>
          <tr>
            <td class="tg-0pky"> < 5 </td>
            <td class="tg-0pky" id="first_setosa"></td>
            <td class="tg-0pky" id="first_versicolor"></td>
            <td class="tg-0pky" id="first_virginica"></td>
            <td class="tg-0pky" id="first_total"></td>

          </tr>
          <tr>
            <td class="tg-0pky"> >= 5 AND < 6</td>
            <td class="tg-0pky" id="second_setosa"></td>
            <td class="tg-0pky"id="second_versicolor"></td>
            <td class="tg-0pky"id="second_virginica"></td>
            <td class="tg-0pky"id="second_total"></td>
          </tr>
          <tr>
            <td class="tg-0pky">>=6 AND < 7 </td>
            <td class="tg-0pky" id="third_setosa"></td>
            <td class="tg-0pky"id="third_versicolor"></td>
            <td class="tg-0pky"id="third_virginica"></td>
            <td class="tg-0pky"id="third_total"></td>
          </tr>
          <tr>
            <td class="tg-0pky">>= 7</td>
            <td class="tg-0pky" id="fourth_setosa"></td>
            <td class="tg-0pky"id="fourth_versicolor"></td>
            <td class="tg-0pky"id="fourth_virginica"></td>
            <td class="tg-0pky"id="fourth_total"></td>
          </tr>



              <tr>
                <td class="tg-0pky">Sepal width(cm)</td>
              </tr>
              <tr>
                <td class="tg-0pky">N</td>
                <td class="tg-0pky" id="N_setosaW"></td>
                <td class="tg-0pky" id="N_versicolorW"></td>
                <td class="tg-0pky" id="N_virginicaW"></td>
                <td class="tg-0pky" id="N_totalW"></td>

              </tr>
              <tr>
                <td class="tg-0pky">Min</td>
                <td class="tg-0pky" id="min_setosaW"></td>
                <td class="tg-0pky" id="min_versicolorW"></td>
                <td class="tg-0pky" id="min_virginicaW"></td>
                <td class="tg-0pky" id="min_totalW"></td>
              </tr>
              <tr>
                <td class="tg-0pky">Max</td>
                <td class="tg-0pky" id="max_setosaW"></td>
                <td class="tg-0pky" id="max_versicolorW"></td>
                <td class="tg-0pky" id="max_virginicaW"></td>
                <td class="tg-0pky" id="max_totalW"></td>
              </tr>
              <tr>
                <td class="tg-0pky">Median</td>
                <td class="tg-0pky" id="median_setosaW"></td>
                <td class="tg-0pky" id="median_versicolorW"></td>
                <td class="tg-0pky" id="median_virginicaW"></td>
                <td class="tg-0pky" id="median_totalW"></td>
              </tr>
              <tr>
                <td class="tg-0pky">Mean</td>
                <td class="tg-0pky" id="mean_setosaW"></td>
                <td class="tg-0pky" id="mean_versicolorW"></td>
                <td class="tg-0pky" id="mean_virginicaW"></td>
                <td class="tg-0pky" id="mean_totalW"></td>
              </tr>
              <tr>
                <td class="tg-0pky">standard deviation </td>
                <td class="tg-0pky" id="sd_setosaW"></td>
                <td class="tg-0pky" id="sd_versicolorW"></td>
                <td class="tg-0pky" id="sd_virginicaW"></td>
                <td class="tg-0pky" id="sd_totalW"></td>
              </tr>

              <tr>
                <td class="tg-0pky">Sepal width(%)</td>
              </tr>
              <tr>
                <td class="tg-0pky">
                  < 3 </td> <td class="tg-0pky" id="first_setosaW">
                </td>
                <td class="tg-0pky" id="first_versicolorW"></td>
                <td class="tg-0pky" id="first_virginicaW"></td>
                <td class="tg-0pky" id="first_totalW"></td>

              </tr>
              <tr>
                <td class="tg-0pky"> >= 3 AND < 3.5</td> <td class="tg-0pky" id="second_setosaW">
                </td>
                <td class="tg-0pky" id="second_versicolorW"></td>
                <td class="tg-0pky" id="second_virginicaW"></td>
                <td class="tg-0pky" id="second_totalW"></td>
              </tr>
              <tr>
                <td class="tg-0pky">>=3.5 AND < 4 </td> <td class="tg-0pky" id="third_setosaW">
                </td>
                <td class="tg-0pky" id="third_versicolorW"></td>
                <td class="tg-0pky" id="third_virginicaW"></td>
                <td class="tg-0pky" id="third_totalW"></td>
              </tr>
         
        </table> 
          
        <a id="downloadLink" onclick="exportF(this)">Export to excel</a>

    </body>
    </html>

I dont know how to use this, i tried it before. I suppose that i need to change parameter data from // saveData(data,fileName), and to put my table inside 'data', but dont know how @thanhdx — Sanja Vesic, Feb 06 '20 at 11:14

Z Kubota · Accepted Answer · 2020-02-06T23:54:09.830

Inside the fillIn() function (after line 243,) you can add the following:

(function () {
                    var textFile = null,
                      makeTextFile = function (text) {
                        var data = new Blob([text], {type: 'text/plain'});

                        // If we are replacing a previously generated file we need to
                        // manually revoke the object URL to avoid memory leaks.
                        if (textFile !== null) {
                          window.URL.revokeObjectURL(textFile);
                        }

                        textFile = window.URL.createObjectURL(data);

                        return textFile;
                      };


                      var create = document.getElementById('create'),
                        // table = document.getElementById('table');
                        table = [
                            getMin(newSetosaArr),
                            getMin(newVersicolorArr),
                            getMin(newVirginicaArr),
                            "\n",
                            getMin(newSetosaArr) + getMin(newVersicolorArr) + getMin(newVirginicaArr),
                            "\n",
                            'max_setosa'+ getMax(newSetosaArr),
                            'max_versicolor'+ getMax(newVersicolorArr),
                            'max_virginica'+ getMax(newVirginicaArr),
                            "\n",
                            'max_total' + sum.toFixed(1),
                            // ...you can add the rest here

                        ];

                      create.addEventListener('click', function () {
                        var link = document.getElementById('downloadlink');
                        link.href = makeTextFile(table);
                        link.style.display = 'block';
                      }, false);
                    })();

HTML: <button id="create">Create file</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a>

(based on this answer: https://stackoverflow.com/a/21016088/9374498 ) \n will start a new line. Add spaces with concatenation + " " + " "

Also, in the HTML file, you may want to move your tags to the end of the body.

Thank you so much! it works, i finish code based on this! – Sanja Vesic Feb 08 '20 at 08:54 — Sanja Vesic, Feb 08 '20 at 08:54

Export table as file.txt in JavaScript

1 Answers1