Exportar datos de tablas html a Excel usando JavaScript / JQuery no funciona correctamente en el navegador Chrome

90

Tengo una tabla HTML en la 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

<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>

Este script funciona bien en Mozilla Firefox , aparece con un cuadro de diálogo de Excel y solicita opciones para 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 hay una 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 de jsfiddle:

http://jsfiddle.net/insin/cmewv/

Esto funciona bien en mozilla pero no en Chrome.

Caso de prueba del navegador Chrome:

Primera imagen: hago clic en el botón Exportar a Excel

Primera imagen: hago clic en el botón Exportar a Excel

y resultado:

Resultado

javascript jquery html excel google-chrome Sukane
fuente
El caso de prueba es para chrome
Sukane
1
El caso de prueba anterior falla si está utilizando un producto de código abierto LibreOffice y el navegador Chrome. Pero si tiene instalado MS Office, el código funcionará correctamente.
Sukane

Respuestas:

164

El script 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);
}

Simplemente cree un iframe en blanco:

<iframe id="txtArea1" style="display:none"></iframe>

Llame a esta función en:

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
sampopes
fuente
1
si no entonces para que es esta linea ?? var txt = document.getElementById ('txtArea1'). contentWindow;
sampopes
3
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
1
Perfecto +1 !!! Está funcionando en IE 11, Chrome 35, Firefox 29, Opera 17 ¡Pero no funciona en Safari 5.1.7! :(
Suganth G
9
¿Cómo puedo cambiar el nombre de Randome? Quiero establecer un nombre específico.
osman Rahimi
21
"El formato de archivo y la extensión de download.xls no coinciden" Esto no hace feliz al administrador: / ¿Alguna idea?
Tom Stickel
34

El complemento 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 enlace de referencia de la tabla de datos a continuación:

https://datatables.net/extensions/buttons/examples/html5/simple.html

(captura de pantalla del sitio de referencia de la tabla de datos) ingrese la descripción de la imagen aquí

Aditya
fuente
4
¡DIOS MIO! ¡Este es un complemento increíble! ... ¡y tiene varios complementos incrustados! Exportar, ordenar, reordenar, vista previa de impresión, etc. ¡Resolví todas mis necesidades de visualización de datos en una sola toma!
Gusstavv Gil
¿Puedo aplicar estilos a mi Excel usando este complemento?
Shruthi Sathyanarayana
@Addy, esta es una única solución de DataTables, ¿verdad?
Karl
1
El botón de exportación eliminará el menú desplegable de recuento de filas de cada página, si desea conservar ambas cosas por favor, consulte datatables.net/extensions/buttons/examples/initialisation/… para resolverlo.
Kaushik Das
El complemento es genial. ¿Hay alguna forma de simplemente extraer el código relevante para exportar los datos y resaltarlos aquí? Sería de gran ayuda. Gracias de antemano
Murtuza Husain
31

Esto podria 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();
}
todotresde
fuente
1
¿Qué pasa si solo quiero exportar columnas que son visibles en la tabla html?
Nouman Bhatti
Hola, no puedo hacer ninguna operación de EXCEL con la hoja, por ejemplo: Autosum. Es por el formato de datos de esta hoja EXCEL o cualquier otro problema ... Necesito ayuda para hacer algunas operaciones.
Nanda Kishore Allu
9

http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/ pruebe este enlace, podría resolver su problema

ingrese la descripción de la imagen aquí

Uchit Shrestha
fuente
Uchit, gracias por tu respuesta. Pero ya probé este ejemplo. Como mencioné, dudo que funcione bien en Mozilla pero no en Chorme. ¿Puedes probar este ejemplo en el navegador Chrome?
Sukane
5
Probé su código en jsfiddle y obtengo un resultado positivo. Funciona bien incluso en chorme. Puede ver en la imagen de arriba que la descarga fue exitosa
Uchit Shrestha
1
Uchit, gracias. Sí, el código está funcionando. El problema es que estaba usando Libre Office, por lo que la exportación de Chrome a Excel no funcionaba bien (captura de pantalla de referencia en la pregunta m). Pero en la oficina de MS funciona, como ha mencionado. Gracias por proporcionar un código jQuery para esto.
Sukane
Esta función no exporta los valores de los campos que tienen menús desplegables ... y marcas de tiempo
SNT93
no funciona con múltiples tablas html, solo con una tabla. ¿Cómo puedo hacer esto con tablas múltiples ??????
ignacio chiazzo
9

En lugar de usar window.open, puede usar un enlace con el onclickevento.
Y puede poner la tabla html en la uri y establecer el nombre del archivo que se descargará.

Demo en vivo :

function exportF(elem) {
  var table = document.getElementById("table");
  var html = table.outerHTML;
  var url = 'data:application/vnd.ms-excel,' + escape(html); // Set your html table into url 
  elem.setAttribute("href", url);
  elem.setAttribute("download", "export.xls"); // Choose the file name
  return false;
}
<table id="table" border="1">
  <tr>
    <td>
      Foo
    </td>
    <td>
      Bar
    </td>
  </tr>
</table>

<a id="downloadLink" onclick="exportF(this)">Export to excel</a>
Expandir fragmento

R3tep
fuente
¿Cómo puedo configurar el borde de la tabla, el ancho del td, etc. en función?
Zeffry Reynando
8

Exportación de mesa

Exportación de mesa : la simple y fácil de implementar para exportar tablas HTML a archivos xlsx, xls, csv y txt.

Para usar esta biblioteca, simplemente llame al TableExportconstructor:

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. Vea aquí más información

insign
fuente
¿Es compatible con PhantomJs? ¿Cómo informar errores?
Golimar
6

Mi combinación de estos ejemplos:

https://www.codexworld.com/export-html-table-data-to-excel-using-javascript https://bl.ocks.org/Flyer53/1de5a78de9c89850999c

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 = '<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>';
    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();
    }
}
Roman Terekhov
fuente
1
Error de referencia no detectado: base64 no está definida
Pedro Joaquín
4

Con respecto a la respuesta de sampopes del 6 de junio de 2014 a las 11:59:

He insertado un estilo CSS con un tamaño de fuente de 20px para mostrar más los datos de Excel. En el código de sampopes faltan las <tr>etiquetas iniciales , por lo que primero saco el título y luego las otras líneas de las tablas dentro de un bucle.

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);
}
Bettelbursche
fuente
¿Puede decirme cómo eliminar una columna específica de la exportación a Excel? Por ejemplo, quiero evitar tab.rows[j].cells[13] , su ayuda es muy apreciada
Disera
Muy buena respuesta, para una tabla muy simple solo mantendría la última línea: window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));la codificación es muy importante.
Pere Pages
4 

 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();
    }
Expandir fragmento

Aquí los valores de 1 a 10 son los nombres de las columnas que obtiene

Rock
fuente
4

Puede usar tableToExcel.js para exportar la tabla en un archivo de Excel.

Esto funciona de la siguiente manera:

1). Incluya este CDN en su proyecto / archivo

<script src="https://cdn.jsdelivr.net/gh/linways/[email protected]/dist/tableToExcel.js"></script>

2). Ya sea usando JavaScript: 

<button id="btnExport" onclick="exportReportToExcel(this)">EXPORT REPORT</button>

function exportReportToExcel() {
  let table = document.getElementsByTagName("table"); // you can use document.getElementById('tableId') as well by providing id to the table tag
  TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
    name: `export.xlsx`, // fileName you could use any name
    sheet: {
      name: 'Sheet 1' // sheetName
    }
  });
}

3). O usando Jquery

<button id="btnExport">EXPORT REPORT</button>

$(document).ready(function(){
    $("#btnExport").click(function() {
        let table = document.getElementsByTagName("table");
        TableToExcel.convert(table[0], { // html code may contain multiple tables so here we are refering to 1st table tag
           name: `export.xlsx`, // fileName you could use any name
           sheet: {
              name: 'Sheet 1' // sheetName
           }
        });
    });
});

Puede consultar este enlace de github para cualquier otra información

https://github.com/linways/table-to-excel/tree/master

o para consultar el ejemplo en vivo, visite el siguiente enlace

https://codepen.io/rohithb/pen/YdjVbb

Espero que esto ayude a alguien :-)

Aman Kumar Gupta
fuente
1

Mi versión de @sampopes responde

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 = "<table border='2px'>";
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 += "<tr bgcolor='#87AFC6'>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[0].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
    j++;
}

for (; j < tab.rows.length; j++) {
    var row = tab.rows[j];
    tab_text += "<tr>";
    for (var l = 0; l < row.cells.length; l++) {
        if ($(tab.rows[j].cells[l]).is(':visible')) {//export visible cols only
            tab_text += "<td>" + row.cells[l].innerHTML + "</td>";
        }
    }
    tab_text += "</tr>";
}

tab_text = tab_text + "</table>";
if (removeLinks)
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");
if (removeImages)
    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); 
if (removeInputParams)
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/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

<iframe id="myIframe" style="opacity: 0; width: 100%; height: 0px;" seamless="seamless"></iframe>

Uso

$("#btnExportToExcel").click(function () {
    exportToExcel(this, '#mytable');
});
irfandar
fuente