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>