vnd - Exportar datos de tabla html a Excel usando JavaScript/JQuery no funciona correctamente en Chrome Browser
jquery export table to excel with css (8)
El plugin Datatable resuelve mejor el propósito y nos permite exportar los datos de la tabla HTML a Excel, PDF, TEXT. fácilmente configurable
Encuentre el ejemplo completo en el siguiente enlace de referencia de tabla de datos:
https://datatables.net/extensions/buttons/examples/html5/simple.html
Tengo una tabla HTML en la plantilla de velocidad. Quiero exportar los datos de la tabla html a Excel usando java script o jquery, comatibale con todos los navegadores. Estoy usando guion debajo
<script type="text/javascript">
function ExportToExcel(mytblId){
var htmltable= document.getElementById(''my-table-id'');
var html = htmltable.outerHTML;
window.open(''data:application/vnd.ms-excel,'' + encodeURIComponent(html));
}
</script>
Esta secuencia de comandos funciona bien en Mozilla Firefox , aparece con un cuadro de diálogo de Excel y solicita opciones de abrir o guardar. Pero cuando probé el mismo script en el navegador Chrome no funciona como se esperaba, cuando se hace clic en el botón no aparece ninguna ventana emergente para Excel. Los datos se descargan en un archivo con "tipo de archivo: archivo", sin extensión, como .xls. No hay errores en la consola de Chrome.
Ejemplo Jsfiddle:
http://jsfiddle.net/insin/cmewv/
Esto funciona bien en mozilla pero no en cromo.
Caso de prueba del navegador Chrome:
Primera imagen: hago clic en Exportar para sobresalir botón
y resultado:
En cuanto a la respuesta de sampopes del 6 de junio a las 11:59:
He insertado un estilo css con tamaño de fuente de 20px para mostrar los datos de Excel mayores. En el código de sampopes faltan las etiquetas <tr> iniciales, por lo que primero imprimo el título y las otras líneas de las tablas dentro de un ciclo.
function fnExcelReport()
{
var tab_text = ''<table border="1px" style="font-size:20px" ">'';
var textRange;
var j = 0;
var tab = document.getElementById(''DataTableId''); // id of table
var lines = tab.rows.length;
// the first headline of the table
if (lines > 0) {
tab_text = tab_text + ''<tr bgcolor="#DFDFDF">'' + tab.rows[0].innerHTML + ''</tr>'';
}
// table data lines, loop starting from 1
for (j = 1 ; j < lines; j++) {
tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>";
}
tab_text = tab_text + "</table>";
tab_text = tab_text.replace(/<A[^>]*>|<//A>/g, ""); //remove if u want links in your table
tab_text = tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
tab_text = tab_text.replace(/<input[^>]*>|<//input>/gi, ""); // reomves input params
// console.log(tab_text); // aktivate so see the result (press F12 in browser)
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
// if Internet Explorer
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv/:11/./)) {
txtArea1.document.open("txt/html","replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, "DataTableExport.xls");
}
else // other browser not tested on IE 11
sa = window.open(''data:application/vnd.ms-excel,'' + encodeURIComponent(tab_text));
return (sa);
}
Esto podría ayudar
function exportToExcel(){
var htmls = "";
var uri = ''data:application/vnd.ms-excel;base64,'';
var template = ''<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'';
var base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)))
};
var format = function(s, c) {
return s.replace(/{(/w+)}/g, function(m, p) {
return c[p];
})
};
htmls = "YOUR HTML AS TABLE"
var ctx = {
worksheet : ''Worksheet'',
table : htmls
}
var link = document.createElement("a");
link.download = "export.xls";
link.href = uri + base64(format(template, ctx));
link.click();
}
La secuencia de comandos de exportación de Excel funciona en IE7 +, Firefox y Chrome.
function fnExcelReport()
{
var tab_text="<table border=''2px''><tr bgcolor=''#87AFC6''>";
var textRange; var j=0;
tab = document.getElementById(''headerTable''); // id of table
for(j = 0 ; j < tab.rows.length ; j++)
{
tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text=tab_text+"</table>";
tab_text= tab_text.replace(/<A[^>]*>|<//A>/g, "");//remove if u want links in your table
tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
tab_text= tab_text.replace(/<input[^>]*>|<//input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv/:11/./)) // If Internet Explorer
{
txtArea1.document.open("txt/html","replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
}
else //other browser not tested on IE 11
sa = window.open(''data:application/vnd.ms-excel,'' + encodeURIComponent(tab_text));
return (sa);
}
Solo crea un iframe en blanco:
<iframe id="txtArea1" style="display:none"></iframe>
Llame a esta función en:
<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
Puede usar una biblioteca como ShieldUI para hacer eso.
Admite la exportación a formatos de Excel ampliamente utilizados de XML y XLSX.
Más detalles aquí: http://demos.shieldui.com/web/grid-general/export-to-excel
http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/ prueba este enlace que podría resolver tu problema
TableExport : la biblioteca simple y fácil de implementar para exportar tablas HTML a archivos xlsx, xls, csv y txt.
Para usar esta biblioteca, simplemente llame al constructor TableExport :
new TableExport(document.getElementsByTagName("table"));
// OR simply
TableExport(document.getElementsByTagName("table"));
// OR using jQuery
$("table").tableExport();
Se pueden transferir propiedades adicionales para personalizar la apariencia de sus tablas, botones y datos exportados. Ver aquí más información
function exportToExcel() {
var tab_text = "<tr bgcolor=''#87AFC6''>";
var textRange; var j = 0, rows = '''';
tab = document.getElementById(''student-detail'');
tab_text = tab_text + tab.rows[0].innerHTML + "</tr>";
var tableData = $(''#student-detail'').DataTable().rows().data();
for (var i = 0; i < tableData.length; i++) {
rows += ''<tr>''
+ ''<td>'' + tableData[i].value1 + ''</td>''
+ ''<td>'' + tableData[i].value2 + ''</td>''
+ ''<td>'' + tableData[i].value3 + ''</td>''
+ ''<td>'' + tableData[i].value4 + ''</td>''
+ ''<td>'' + tableData[i].value5 + ''</td>''
+ ''<td>'' + tableData[i].value6 + ''</td>''
+ ''<td>'' + tableData[i].value7 + ''</td>''
+ ''<td>'' + tableData[i].value8 + ''</td>''
+ ''<td>'' + tableData[i].value9 + ''</td>''
+ ''<td>'' + tableData[i].value10 + ''</td>''
+ ''</tr>'';
}
tab_text += rows;
var data_type = ''data:application/vnd.ms-excel;base64,'',
template = ''<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table border="2px">{table}</table></body></html>'',
base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)))
},
format = function (s, c) {
return s.replace(/{(/w+)}/g, function (m, p) {
return c[p];
})
}
var ctx = {
worksheet: "Sheet 1" || ''Worksheet'',
table: tab_text
}
document.getElementById("dlink").href = data_type + base64(format(template, ctx));
document.getElementById("dlink").download = "StudentDetails.xls";
document.getElementById("dlink").traget = "_blank";
document.getElementById("dlink").click();
}
Aquí los valores 1 a 10 son los nombres de columnas que está obteniendo