How to Use custom HTML and JavaScript To Export Data to Excel

Hello
One drawback is the table headers dont come in the excel.
Were you able to get the table header.
Also if you have a repeatable container then this will not work. This is applicable for table only.

Hi Dibyajit and Loreley2018,

No the header isn't part of the deal. I didn't consider it at the time and haven't investigated it...I might have a look but can't promise anything.

Regarding XLS or XLSX this is not possible unless you purchase other plugins etc. CSV is a fully recognised method of downloading any data to Excel. There will be no provisioning to Excel format direct.

Regards
Seán

Hello Sean.
First of all, I would like to thank you for all your Comments, Posts and answers in the bonita Community.
A lot of things make sense thanks to you.. the above code works for me and has helped me several times. Its a Working model.
If you do come up with a solution to add the header in the above example, it would be great ... but its no problem as of now..
Let me know if you can guide me for a similar scenario but instead of a table widget, i have a repeatable custom container with text fields to display same as a table..
Everything is same as above.. except the API response variable is set as value to the container.

Again many many thanks for your valuable feedback.
Regards

Hi Dibyajit and Loreley2018

:) Happy news...

Not the most elegant but based on the previous code NOW HAS HEADERS!!!

Just replace the existing code with the following and it will work exactly the same way,

regards

Seán

function ($scope) {

    // define a function to be used in template with ctrl.toggleBackgroundColor()
    this.exportTableToCSV02 = function () {

        function exportTableToCSV029($table, filename) {

            var $rowsH = $table.find('tr:has(th)'),

                    // Temporary delimiter characters unlikely to be typed by keyboard
                    // This is to avoid accidentally splitting the actual contents
                    tmpColDelimH = String.fromCharCode(11), // vertical tab character
                    tmpRowDelimH = String.fromCharCode(0), // null character

                    // actual delimiter characters for CSV format
                    colDelimH = '","',
                    rowDelimH = '"\r\n"',

                    csvH = '"' + $rowsH.map(function (i, rowH) {
                        var $rowH = $(rowH),
                            $colsH = $rowH.find('th');

                        return $colsH.map(function (j, colH) {
                            var $colH = $(colH),
                                textH = $colH.text();

                            return textH.replace(/"/g, '""'); // escape double quotes

                        }).get().join(tmpColDelimH);

                    }).get().join(tmpRowDelimH)
                    .split(tmpRowDelimH).join(rowDelimH)
                    .split(tmpColDelimH).join(colDelimH) + '"';
                    
            //console.log($rowsH);
        
            var $rows = $table.find('tr:has(td)'),

                // Temporary delimiter characters unlikely to be typed by keyboard
                // This is to avoid accidentally splitting the actual contents
                tmpColDelim = String.fromCharCode(11), // vertical tab character
                tmpRowDelim = String.fromCharCode(0), // null character

                // actual delimiter characters for CSV format
                colDelim = '","',
                rowDelim = '"\r\n"',

                csvD = '"' + $rows.map(function (i, row) {
                    var $row = $(row),
                        $cols = $row.find('td');

                    return $cols.map(function (j, col) {
                        var $col = $(col),
                            text = $col.text();

                        return text.replace(/"/g, '""'); // escape double quotes

                    }).get().join(tmpColDelim);

                }).get().join(tmpRowDelim)
                .split(tmpRowDelim).join(rowDelim)
                .split(tmpColDelim).join(colDelim) + '"';

            //console.log(rowDelim + $rows);
            
            var csvS = csvH.replace(/""/,'"');
            var csvT = csvD.replace(/""/,'"');
            var csv1 = csvS + rowDelim + csvT;
            var csv2 = csv1.replace(/""/,'"');
            var csv = csv2.replace(/""/,'"');
            
            //.concat(rowDelim, csvD.replace(/""/,'"'));
            console.log("1" + csvS);
            console.log("2" + csvT);
            console.log("3" + csv1);
            console.log("4" + csv2);
            console.log("5" + csv);

            // Deliberate 'false', see comment below
            if (false && window.navigator.msSaveBlob) {

                var blob = new Blob([decodeURIComponent(csv)], {
                    type: 'text/csv;charset=utf8'
                });

                // Crashes in IE 10, IE 11 and Microsoft Edge
                // See MS Edge Issue #10396033
                // Hence, the deliberate 'false'
                // This is here just for completeness
                // Remove the 'false' at your own risk
                window.navigator.msSaveBlob(blob, filename);

            } else if (window.Blob && window.URL) {

                // HTML5 Blob
                var blob = new Blob([csv], {
                    type: 'text/csv;charset=utf-8'
                });
                var csvUrl = URL.createObjectURL(blob);

                //this trick will generate a temp  tag
                var link = document.createElement("a");
                link.href = csvUrl;

                //set the visibility hidden so it will not effect on your web-layout
                link.style = "visibility:hidden";
                link.download = filename; //fileName + ".csv";

                //this part will append the anchor tag and remove it after automatic click
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

            } else {

                // Data URI
                var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);

                //this trick will generate a temp  tag
                var link = document.createElement("a");
                link.href = csvData;

                //set the visibility hidden so it will not effect on your web-layout
                link.style = "visibility:hidden";
                link.download = filename; //fileName + ".csv";

                //this part will append the anchor tag and remove it after automatic click
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);

            }

        }

        //use a default name to export - change as necessary
        //if the table name in the div id= changes - you MUST change the name here also
        //default is dvData
        var args = [$('#dvData>table'), 'export.csv'];
        exportTableToCSV029.apply(this, args);

    };

}

Hello Sean
Thank you . I will try the New code.