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>

Answer 1

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.