Hi, here is my answer:
Create a Custom Widget
Add a CSS Asset with the following - you can change this to your needs later:
a.export,
a.export:visited {
display: inline-block;
text-decoration: none;
color: #000;
background-color: #ddd;
border: 1px solid #ccc;
padding: 8px;
}
Add an External Javascript Asset pointing to http://code.jquery.com/jquery-1.11.0.min.js (use whichever jQuery library you want but this one I know works…)
Add the following to Template as a sample table:
the first line a is the Button to press and is formatted by the CSS above, if you change the table div id=“dvData” then make sure you also change it in the code below.
Export Table data into Excel
| Column One |
Column Two |
Column Three |
| row1 Col1 |
row1 Col2 |
row1 Col3 |
| row2 Col1 |
row2 Col2 |
row2 Col3 |
| row3 Col1 |
row3 Col2 |
row3 Col3 |
| row4 'Col1' |
row4 'Col2' |
row4 'Col3' |
| row5 "Col1" |
row5 "Col2" |
row5 "Col3" |
| row6 "Col1" |
row6 "Col2" |
row6 "Col3" |
Add the following code to the Controller:
function ($scope) {
// define a function to be used in template with ctrl.toggleBackgroundColor()
this.exportTableToCSV02 = function() {
function exportTableToCSV029($table, filename) {
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"',
csv = '"' + $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) + '"';
// 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 <a /> 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 <a /> 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);
};
}
Save and add the Widget to a page,
Save and Preview…
Voila - a working solution.
regards
Seán
PS: As this reply offers an answer your question, and if you like it, please Mark UP and/or as Resolved.