Exportar datos de la tabla html a Excel usando Java Script PDF

Preview

Summary

Para exportar una tabla html a Excel con Javascript...

Description

Exportar datos de la tabla html a Excel usando JavaScript / JQuery no funciona correctamente en el navegador Chrome Pregunta Preguntó Hace 5 años y 10 meses Activo hace 2 meses Visto 445k veces 85 64

Tengo una tabla HTML en plantilla de velocidad. Quiero exportar los datos de la tabla html para sobresalir usando java script o jquery, comatibale con todos los navegadores. Estoy usando el siguiente script

Este script funciona bien en Mozilla Firefox , aparece con un cuadro de diálogo de Excel y solicita opciones de abrir o guardar. Pero cuando probé la misma secuencia de comandos en el navegador Chrome no funciona como se esperaba, cuando se hace clic en el botón no hay ventanas emergentes 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 de 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 el botón Exportar a Excel

y resultado:

javascript jquery html excel google-chrome

compartirmejorar esta pregunta editado el 16 de mayo de 1919 a las 6:31

Muhammed Albarmavi 12,2k33 insignias de oro2222 insignias de plata4949 insignias de bronce preguntó el 11 de marzo de 2014 a las 6:22

Sukane 2,10222 insignias de oro1313 insignias de plata1919 insignias de bronce  

El caso de prueba es para cromo - Sukane Mar 18 '14 a las 11:22 1 El caso de prueba anterior falla si está utilizando el producto de código abierto LibreOffice y el navegador Chrome. Pero si tiene instalado MS Office, el código funcionará correctamente. - Sukane Mar 19 '14 a las 17:39 añadir un comentario

11 respuestas votosmás antiguosactivos

146

El script de exportación de Excel funciona en IE7 +, Firefox y Chrome. function fnExcelReport() { var tab_text=""; 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+""; //tab_text=tab_text+"";

} tab_text=tab_text+""; tab_text= tab_text.replace(/]*>|/g, "");//remove if u want links in your table tab_text= tab_text.replace(/]*>/gi,""); // remove if u want images in your table tab_text= tab_text.replace(/]*>|/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); }

Simplemente cree un iframe en blanco:

Llame a esta función en: EXPORT compartirmejorar esta respuesta editado el 6 de enero de 15 a las 18:26

JasonMArcher 10.4k1010 insignias de oro4949 insignias de plata4949 insignias de bronce Respondido Jun 6 '14 a las 11:59

Sampopes 1,94911 insignia de oro1414 insignias de plata2828 insignias de bronce     

1 si no, ¿para qué es esta línea? var txt = document.getElementById ('txtArea1'). contentWindow; - Sampopes Jun 20 '14 a las 6:15 2 En Chrome, cuando hace clic en el botón de descarga, no sucede nada al usar este método. Sin errores de consola ni nada. - Kyle Bachan 8 de julio de 14 a 14:13 1 Perfecto +1 !!! Funciona en IE 11, Chrome 35, Firefox 29, Opera 17 ¡Pero no funciona en safari 5.1.7! :( - Suganth G Nov 27 '14 a las 12:16 66 ¿Cómo puedo cambiar el nombre de Randome? No le pondré un nombre específico. - osman Rahimi 2 de febrero de 15 a 8:06 18 años "El formato de archivo y la extensión de download.xls no coinciden" Esto no hace feliz al administrador: / ¿Alguna idea? - Tom Stickel Oct 30 '15 a las 21:02 mostrar 41 comentarios más 31

El complemento de tabla de datos resuelve el propósito mejor y nos permite exportar los datos de la tabla HTML a Excel, PDF, TEXTO. 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

(captura de pantalla del sitio de referencia de la tabla de datos)

compartirmejorar esta respuesta respondió el 4 de agosto de 16 a las 7:35

Aditya 1,9071212 insignias de plata2222 insignias de bronce



  



44 ¡DIOS MIO! ¡Este es un plugin increíble! ... ¡y tiene varios plugins integrados! Exportar, ordenar, reordenar, vista previa de impresión, etc. ¡Resuelto todas mis necesidades de datos que se muestran en una sola toma! - Gusstavv Gil 16 de octubre de 16 a 10:21 ¿Puedo aplicar estilos a mi Excel usando este complemento? - Shruthi Sathyanarayana 14 de junio de 17 a 6:43 @Addy, esta es una solución única de DataTables, ¿verdad? - Karl 28 de agosto de 17 a las 10:53 1 El botón de exportación eliminará cada lista desplegable de recuento de páginas, si desea mantener ambas cosas? compruebe datatables.net/extensions/buttons/examples/initialisation/… para resolverlo. - Kaushik Das Sep 7 '17 a las 11:41 El complemento es genial. ¿Hay alguna manera de extraer el código relevante para exportar los datos y resaltar aquí? Eso sería de gran ayuda. Gracias de antemano - Murtuza Husain Mar 4 '19 a las 8:53 añadir un comentario 26

Esto podria ayudar function exportToExcel(){ var htmls = ""; var uri = 'data:application/vnd.ms-excel;base64,'; var template = '{table}', 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(); } Ejecutar fragmento de código Expandir fragmento

Aquí los valores del 1 al 10 son nombres de columnas que está obteniendo compartirmejorar esta respuesta editado el 19 de junio de 18 a las 20:48

marc_s 620k139139 insignias de oro 11801180 insignias de plata13131313 insignias de bronce respondió jun 6 '18 a las 15:04

Rock 11999 insignias de bronce

añadir un comentario 2

Mi fusión de estos ejemplos: https://www.codexworld.com/export-html-table-data-to-excel-using-javascript https://bl.ocks.org/Flyer53/1d e5a78de9c89850999c function exportTableToExcel(tableId, filename) { let dataType = 'application/vnd.ms-excel'; let extension = '.xls'; let base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }; let template = '{table}'; let render = function(template, content) { return template.replace(/{(\w+)}/g, function(m, p) { return content[p]; }); }; let tableElement = document.getElementById(tableId); let tableExcel = render(template, { worksheet: filename, table: tableElement.innerHTML }); filename = filename + extension; if (navigator.msSaveOrOpenBlob) { let blob = new Blob( [ '\ufeff', tableExcel ], { type: dataType } ); navigator.msSaveOrOpenBlob(blob, filename); } else { let downloadLink = document.createElement("a"); document.body.appendChild(downloadLink); downloadLink.href = 'data:' + dataType + ';base64,' + base64(tableExcel); downloadLink.download = filename;

downloadLink.click(); } } compartirmejorar esta respuesta Respondido Sep 19 '19 a las 12:41

Roman Terekhov 9311 insignia de plata44 insignias de bronce añadir un comentario 00

Mi versión de la respuesta @sampopes function exportToExcel(that, id, hasHeader, removeLinks, removeImages, removeInputParams) { if (that == null || typeof that === 'undefined') { console.log('Sender is required'); return false; } if (!(that instanceof HTMLAnchorElement)) { console.log('Sender must be an anchor element'); return false; } if (id == null || typeof id === 'undefined') { console.log('Table id is required'); return false; } if (hasHeader == null || typeof hasHeader === 'undefined') { hasHeader = true; } if (removeLinks == null || typeof removeLinks === 'undefined') { removeLinks = true; } if (removeImages == null || typeof removeImages === 'undefined') { removeImages = false; } if (removeInputParams == null || typeof removeInputParams === 'undefined') { removeInputParams = true; } var tab_text = ""; var textRange; tab = $(id).get(0); if (tab == null || typeof tab === 'undefined') { console.log('Table not found'); return; } var j = 0; if (hasHeader && tab.rows.length > 0) { var row = tab.rows[0]; tab_text += ""; for (var l = 0; l < row.cells.length; l++) { if ($(tab.rows[0].cells[l]).is(':visible')) {//export visible cols only tab_text += "" + row.cells[l].innerHTML + ""; } } tab_text += ""; j++; } for (; j < tab.rows.length; j++) {

var row = tab.rows[j]; tab_text += ""; for (var l = 0; l < row.cells.length; l++) { if ($(tab.rows[j].cells[l]).is(':visible')) {//export visible cols only tab_text += "" + row.cells[l].innerHTML + ""; } } tab_text += ""; } tab_text = tab_text + ""; if (removeLinks) tab_text = tab_text.replace(/]*>|/g, ""); if (removeImages) tab_text = tab_text.replace(/]*>/gi, ""); if (removeInputParams) tab_text = tab_text.replace(/]*>|/gi, ""); var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer { myIframe.document.open("txt/html", "replace"); myIframe.document.write(tab_text); myIframe.document.close(); myIframe.focus(); sa = myIframe.document.execCommand( "SaveAs", true, document.title + ".xls"); return true; } else { //other browser tested on IE 11 var result = "data:application/vnd.ms-excel," + encodeURIComponent(tab_text); that.href = result; that.download = document.title + ".xls"; return true; } }

Requiere un iframe

Uso $("#btnExportToExcel").click(function () { exportToExcel(this, '#mytable'); }); compartirmejorar esta respuesta...