Exportar dados da tabela html para Excel usando JavaScript / JQuery não está funcionando corretamente no navegador Chrome

Question 1

Eu tenho uma tabela HTML no modelo de velocidade. Quero exportar os dados da tabela html para o excel usando java script ou jquery, comatibale com todos os navegadores. Estou usando o script abaixo

<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 bem no Mozilla Firefox , ele aparece com uma caixa de diálogo do Excel e pede opções para abrir ou salvar. Mas quando testei o mesmo script no navegador Chrome ele não está funcionando como esperado, ao clicar no botão não há pop-up para o excel. Os dados são baixados em um arquivo com "tipo de arquivo: arquivo", sem extensão como .xls. Não há erros no console do Chrome.

Exemplo de Jsfiddle:

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

Isso funciona bem no Mozilla, mas não no Chrome.

Caso de teste do navegador Chrome:

Primeira imagem: clico no botão Exportar para excel

e resultado:

Resultado

Question 2

O script de exportação do Excel funciona no IE7 +, Firefox e 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);
}

Basta criar um iframe em branco:

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

Chame esta função em:

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>

Question 3

O plugin datável resolve melhor o propósito e nos permite exportar os dados da tabela HTML para Excel, PDF, TEXT. facilmente configurável.

Encontre o exemplo completo no link de referência da tabela de dados abaixo:

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

(captura de tela do site de referência da tabela de dados)

Question 4

Isso pode ajudar

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

Question 5

http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/ tente este link, ele pode resolver o seu problema

insira a descrição da imagem aqui

Question 6

Em vez de usar, window.openvocê pode usar um link com oonclick evento.
E você pode colocar a tabela html no uri e definir o nome do arquivo a ser baixado.

Demonstração ao 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 trecho

Question 7

TableExport - A biblioteca simples e fácil de implementar para exportar tabelas HTML para arquivos xlsx, xls, csv e txt.

Para usar esta biblioteca, basta chamar o TableExportconstrutor:

new TableExport(document.getElementsByTagName("table"));

// OR simply

TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

Propriedades adicionais podem ser passadas para personalizar a aparência de suas tabelas, botões e dados exportados. Veja aqui mais informações

Question 8

Minha fusão destes exemplos:

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

Question 9

Você pode usar uma biblioteca como a ShieldUI para fazer isso.

Ele oferece suporte à exportação para os formatos Excel amplamente usados de XML e XLSX.

Mais detalhes aqui: http://demos.shieldui.com/web/grid-general/export-to-excel

Question 10

Em relação à resposta sampopes de 6 de junho '14 às 11h59:

Inseri um estilo css com tamanho de fonte de 20px para exibir os dados do Excel maiores. No código sampopes, faltam as <tr>tags principais , portanto, primeiro produzo o título e, em seguida, as outras linhas da tabela em um loop.

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

Question 11

 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 trecho

Aqui, os valores de 1 a 10 são nomes de colunas que você está obtendo

Question 12

Você pode usar tableToExcel.js para exportar tabela em arquivo excel.

Isso funciona da seguinte maneira:

1). Inclua este CDN em seu projeto / arquivo

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

2). Qualquer um 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). Ou 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
           }
        });
    });
});

Você pode consultar este link do github para qualquer outra informação

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

ou para consultar o exemplo ao vivo, visite o seguinte link

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

Espero que isso ajude alguém :-)

Question 13

Minha versão 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;
}
}

Requer um iframe

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

Uso

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

Answer 1

Eu tenho uma tabela HTML no modelo de velocidade. Quero exportar os dados da tabela html para o excel usando java script ou jquery, comatibale com todos os navegadores. Estou usando o script abaixo

<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 bem no Mozilla Firefox , ele aparece com uma caixa de diálogo do Excel e pede opções para abrir ou salvar. Mas quando testei o mesmo script no navegador Chrome ele não está funcionando como esperado, ao clicar no botão não há pop-up para o excel. Os dados são baixados em um arquivo com "tipo de arquivo: arquivo", sem extensão como .xls. Não há erros no console do Chrome.

Exemplo de Jsfiddle:

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

Isso funciona bem no Mozilla, mas não no Chrome.

Caso de teste do navegador Chrome:

Primeira imagem: clico no botão Exportar para excel

e resultado:

Resultado

Answer 2

O caso de teste é para cromo

Sukane

Answer 3

1

O caso de teste acima falha se você estiver usando o produto de código aberto LibreOffice e o navegador Chrome. Mas se você tiver o MS Office instalado, o código funcionará corretamente.

Sukane

Answer 4

O script de exportação do Excel funciona no IE7 +, Firefox e 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);
}

Basta criar um iframe em branco:

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

Chame esta função em:

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>

Answer 5

1

se não, então para o que é essa linha ?? var txt = document.getElementById ('txtArea1'). contentWindow;

sampopes de

Answer 6

3

No Chrome, quando você clica no botão de download, nada acontece ao usar esse método. Sem erros de console nem nada.

Kyle Bachan

Answer 7

1

Perfeito +1 !!! Está funcionando no IE 11, Chrome 35, Firefox 29, Opera 17 Mas não funciona no safari 5.1.7 !!! :(

Suganth G

Answer 8

9

como posso mudar o nome Randome. Eu queria definir o nome específico.

osman Rahimi

Answer 9

21

"O formato do arquivo e a extensão de download.xls não correspondem" Isso não está deixando o gerente feliz: / Alguma ideia?

Tom Stickel

Answer 10

34

O plugin datável resolve melhor o propósito e nos permite exportar os dados da tabela HTML para Excel, PDF, TEXT. facilmente configurável.

Encontre o exemplo completo no link de referência da tabela de dados abaixo:

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

(captura de tela do site de referência da tabela de dados)

Aditya
fonte

4

AMD! Este é um plugin incrível! ... e tem vários plugins embutidos !! Exportar, classificar, reordenar, visualizar impressão, etc ... Resolvi todos os meus dados mostrando necessidades em apenas uma foto!

Gusstavv Gil

Posso aplicar estilos ao meu Excel usando este plugin?

Shruthi Sathyanarayana

@Addy, esta é uma solução apenas para DataTables, certo?

Karl

1

O botão de exportação removerá cada lista suspensa de contagem de linha da página, se você deseja manter as duas coisas? verifique datatables.net/extensions/buttons/examples/initialisation/… para resolvê-lo.

Kaushik Das

O plugin é ótimo. Existe uma maneira de apenas extrair o código relevante para exportar os dados e destacar aqui? Isso seria uma grande ajuda. Agradecemos antecipadamente

Murtuza Husain

Answer 11

4

AMD! Este é um plugin incrível! ... e tem vários plugins embutidos !! Exportar, classificar, reordenar, visualizar impressão, etc ... Resolvi todos os meus dados mostrando necessidades em apenas uma foto!

Gusstavv Gil

Answer 12

Posso aplicar estilos ao meu Excel usando este plugin?

Shruthi Sathyanarayana

Answer 13

@Addy, esta é uma solução apenas para DataTables, certo?

Karl

Answer 14

1

O botão de exportação removerá cada lista suspensa de contagem de linha da página, se você deseja manter as duas coisas? verifique datatables.net/extensions/buttons/examples/initialisation/… para resolvê-lo.

Kaushik Das

Answer 15

O plugin é ótimo. Existe uma maneira de apenas extrair o código relevante para exportar os dados e destacar aqui? Isso seria uma grande ajuda. Agradecemos antecipadamente

Murtuza Husain

Answer 16

Isso pode ajudar

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

Answer 17

1

E se eu só quiser exportar colunas visíveis na tabela html ??

Nouman Bhatti

Answer 18

Olá, não consigo fazer nenhuma operação EXCEL com a planilha, por exemplo: Automatização. É por causa do formato dos dados desta planilha EXCEL ou qualquer outro problema .. Preciso de ajuda para fazer algumas operações.

Nanda Kishore Allu

Answer 19

9

http://wsnippets.com/export-html-table-data-excel-sheet-using-jquery/ tente este link, ele pode resolver o seu problema

insira a descrição da imagem aqui

Uchit Shrestha
fonte

Uchit, obrigado pela sua resposta. Mas eu já tentei este exemplo. Como mencionei, duvido que funcione bem no Mozilla, mas não no Chorme. Por favor, tente este exemplo no navegador Chrome?

Sukane

5

Eu tentei seu código no jsfiddle e estou obtendo um resultado positivo. Está funcionando bem mesmo em chorme. Você pode ver na imagem acima que o download foi bem

sucedido

1

Uchit, obrigado. Sim, o código está funcionando. O problema é que eu estava usando o Libre Office, então, no Chrome, a exportação para o excel não estava funcionando bem (tela de referência na questão m). Mas no MS Office está funcionando, como você mencionou. Obrigado por fornecer um código jQuery para isso.

Sukane

Esta função não está exportando os valores dos campos com drop downs..and timestamps

SNT93

não funciona com tabelas múltiplas html, apenas com uma tabela. Como posso fazer isso com tabelas múltiplas ??????

ignacio chiazzo

Answer 20

Uchit, obrigado pela sua resposta. Mas eu já tentei este exemplo. Como mencionei, duvido que funcione bem no Mozilla, mas não no Chorme. Por favor, tente este exemplo no navegador Chrome?

Sukane

Answer 21

5

Eu tentei seu código no jsfiddle e estou obtendo um resultado positivo. Está funcionando bem mesmo em chorme. Você pode ver na imagem acima que o download foi bem

sucedido

Answer 22

1

Uchit, obrigado. Sim, o código está funcionando. O problema é que eu estava usando o Libre Office, então, no Chrome, a exportação para o excel não estava funcionando bem (tela de referência na questão m). Mas no MS Office está funcionando, como você mencionou. Obrigado por fornecer um código jQuery para isso.

Sukane

Answer 23

Esta função não está exportando os valores dos campos com drop downs..and timestamps

SNT93

Answer 24

não funciona com tabelas múltiplas html, apenas com uma tabela. Como posso fazer isso com tabelas múltiplas ??????

ignacio chiazzo

Answer 25

Em vez de usar, window.openvocê pode usar um link com oonclick evento.
E você pode colocar a tabela html no uri e definir o nome do arquivo a ser baixado.

Demonstração ao 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 trecho

Answer 26

como posso definir a borda da mesa, largura td etc em função?

Zeffry Reynando

Answer 27

TableExport - A biblioteca simples e fácil de implementar para exportar tabelas HTML para arquivos xlsx, xls, csv e txt.

Para usar esta biblioteca, basta chamar o TableExportconstrutor:

new TableExport(document.getElementsByTagName("table"));

// OR simply

TableExport(document.getElementsByTagName("table"));

// OR using jQuery

$("table").tableExport();

Propriedades adicionais podem ser passadas para personalizar a aparência de suas tabelas, botões e dados exportados. Veja aqui mais informações

Answer 28

Suporta PhantomJs? Como relatar bugs?

golimar

Answer 29

Minha fusão destes exemplos:

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

Answer 30

1

Erro de referência não capturado: base64 não está definida

Pedro Joaquín

Answer 31

Você pode usar uma biblioteca como a ShieldUI para fazer isso.

Ele oferece suporte à exportação para os formatos Excel amplamente usados de XML e XLSX.

Mais detalhes aqui: http://demos.shieldui.com/web/grid-general/export-to-excel

Answer 32

Em relação à resposta sampopes de 6 de junho '14 às 11h59:

Inseri um estilo css com tamanho de fonte de 20px para exibir os dados do Excel maiores. No código sampopes, faltam as <tr>tags principais , portanto, primeiro produzo o título e, em seguida, as outras linhas da tabela em um loop.

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

Answer 33

Você pode me dizer como remover colunas específicas de serem exportadas para o Excel. Por exemplo, eu quero evitar tab.rows[j].cells[13] , sua ajuda é muito apreciada

Disera

Answer 34

Muito boa resposta, para uma tabela muito simples manteria apenas a última linha: window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));o enconding é muito importante.

Pere Pages de

Answer 35

 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 trecho

Aqui, os valores de 1 a 10 são nomes de colunas que você está obtendo

Answer 36

Você pode usar tableToExcel.js para exportar tabela em arquivo excel.

Isso funciona da seguinte maneira:

1). Inclua este CDN em seu projeto / arquivo

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

2). Qualquer um 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). Ou 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
           }
        });
    });
});

Você pode consultar este link do github para qualquer outra informação

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

ou para consultar o exemplo ao vivo, visite o seguinte link

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

Espero que isso ajude alguém :-)

Answer 37

Minha versão 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;
}
}

Requer um iframe

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

Uso

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

Exportar dados da tabela html para Excel usando JavaScript / JQuery não está funcionando corretamente no navegador Chrome

Respostas: