0

Tenho o seguinte script para realizar uma exportação de uma tabela para o excel:

<script>
            function fnExcelReport(){
                var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
                var textRange; var j=0;
                tab = document.getElementById('table'); // id of table

                for(j = 0 ; j < tab.rows.length ; j++) 
                {     
                    tab_text=tab_text+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

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

E meu resultado, é mostrado na imagem abaixo:

Resultado do script

Gostaria de saber como posso remover a última coluna ("Ações") ?

Obrigado

1 Resposta 1

0

Esse resposta é uma adaptação dessa resposta aqui no SOpt com essa outra resposta no SOen.

Crie um botão:

<button onclick="tableToExcel('Arquivo.xlsx', '#tblExport')">Exportar Excel</button>

Veja que é adicionado o evento onclick, que será chamado o método tableToExcel que recebe dois parâmetros, o primeiro é o nome como sera salvo o arquivo seguido da extensão .xlsx, o segundo parâmetro é a tabela a ser exportada.

Para remover a coluna deseja, basta adicionar a classe CSS remover exemplo: <td class="remover">conteúdo</td>

Exemplo em ES5:

const tableToExcel = (nome, table) => {
    let mimetype = 'application/vnd.ms-excel';
    let link = document.querySelector('#link-to-download');
    let tabela = document.querySelector(table);
    let clone = tabela.cloneNode(true);
    let remover = clone.querySelectorAll('.remover');

    remover.forEach((td) => {
        if (td.parentElement) {
            td.parentElement.removeChild(td);
        }
    });

    
    link.href = window.URL.createObjectURL(new Blob([clone.outerHTML], {
        type: mimetype
    }));
    link.download = nome;
    link.click();
};
table {
    border: 1px solid #ccc;
}
table thead {
  background: #069;
  color: #FFF;
}
table thead tr th {
  width: 140px;
}
table td {
    padding: 4px;
    text-transform: uppercase;
}
table tr:nth-child(2n+0) td {
    background: #e7e7e7;
}

button {
    background: #069;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 8px 30px;
    text-transform: uppercase;
}
<table id="tblExport">
    <thead>
        <tr>
            <th>Coluna 1</th>
            <th>Coluna 2</th>
            <th colspan="2" class="remover">Coluna 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>teste</td>
            <td>teste</td>
            <td class="remover">teste</td>
            <td class="remover">teste</td>
        </tr>
        <tr>
            <td>teste</td>
            <td>teste</td>
            <td class="remover">teste</td>
            <td class="remover">teste</td>
        </tr>
        <tr>
            <td>teste</td>
            <td>teste</td>
            <td class="remover">teste</td>
            <td class="remover">teste</td>
        </tr>
    </tbody>
</table>
<p><button onclick="tableToExcel('Arquivo.xlsx', '#tblExport')">Exportar Excel</button></p>
<a id="link-to-download" style="display: none;"></a>

Para utilizar conforme a resposta da pergunta citada pelo AP por comentário, basta alterar laço for para:

for(j = 0 ; j < tab.rows.length ; j++) 
{
    var row = tab.rows[j];
    var numberOfCells = row.cells.length;
    // Altere o número 4 pelo número de colunas no TBODY
    // A cada linha de registro na tabela, sera excluído as duas ultimas colunas,
    // pois a coluna ACAO no THEAD ta setado o atributo 'colspan=2'
    if (numberOfCells === 4) {
       row.deleteCell(-1);
       row.deleteCell(-1);
    } else {
       // Remove a coluna ACAO
       row.deleteCell(-1);
    }
    tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
}

Repare que fiz uma pequena adaptação:

var tab = document.getElementById('table');

Para:

var tab = document.getElementById('table').cloneNode(true);

Fazendo assim, o elemento é clonado e evita a alteração do conteúdo já existente na página.

O snippet abaixo não funciona aqui no SO, podes ver funcionando no jsbin

Blocked opening 'data:application/vnd.ms-excel,%3Ctable%20border%3D'2px'%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cth%3EColuna%201%3C%2Fth%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cth%3EColuna%202%3C%2Fth%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3Eteste%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3Eteste%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3Eteste%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3Eteste%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3C%2Ftr%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3Eteste%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ctd%3Eteste%3C%2Ftd%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3C%2Ftr%3E%3C%2Ftable%3E' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

Exemplo funcionando

function fnExcelReport(){
  var tab_text="<table border='2px'>";
  var textRange; var j=0;
  tab = document.getElementById('table').cloneNode(true);
  
  for(j = 0 ; j < tab.rows.length ; j++) 
  {
    var row = tab.rows[j];
    var numberOfCells = row.cells.length;
    // Altere o número 4 pelo número de colunas no TBODY
    // A cada linha de registro na tabela, sera excluído as duas ultimas colunas,
    // pois a coluna ACAO no THEAD ta setado o atributo 'colspan=2'
    if (numberOfCells === 4) {
      row.deleteCell(-1);
      row.deleteCell(-1);
    } else {
      // Remove a coluna ACAO
      row.deleteCell(-1);
    }
    tab_text=tab_text+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

  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);
}
table {
    border: 1px solid #ccc;
}
table thead {
  background: #069;
  color: #FFF;
}
table thead tr th {
  width: 140px;
}
table td {
    padding: 4px;
    text-transform: uppercase;
}
table tr:nth-child(2n+0) td {
    background: #e7e7e7;
}

button {
    background: #069;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 8px 30px;
    text-transform: uppercase;
}
<table id="table">
    <thead>
        <tr>
            <th>Coluna 1</th>
            <th>Coluna 2</th>
            <th colspan="2" class="remover">Coluna 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>teste</td>
            <td>teste</td>
            <td class="remover">teste</td>
            <td class="remover">teste</td>
        </tr>
        <tr>
            <td>teste</td>
            <td>teste</td>
            <td class="remover">teste</td>
            <td class="remover">teste</td>
        </tr>
        <tr>
            <td>teste</td>
            <td>teste</td>
            <td class="remover">teste</td>
            <td class="remover">teste</td>
        </tr>
    </tbody>
</table>
<p><button onclick="fnExcelReport()">Exportar Excel</button></p>

2
  • Obrigado pela resposta. Meu script vem exportando corretamente e não posso mudar sua estrutura completamente, como solicitado pela sua resposta. venho buscando algo parecido com essa resposta: stackoverflow.com/questions/39539889/… 15/12/2017 às 15:36
  • @AlexsanderCaproni, editei a resposta, está logo abaixo.
    – NoobSaibot
    16/12/2017 às 5:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .