2

Tenho uma tabela com 5 colunas, considerando que a primeira possui uma caixa de seleção e a ultima possui um botão para eliminar aquela determinada linha.

A questão é que quero exportar para Excel, em um arquivo .xsl, porém sem a primeira e a ultima coluna, constando somente: ID, name e house. Vejam abaixo o código para exportação:

$("#export").click(function(e) {
    var type = 'data:application/vnd.ms-excel';
    var _div = document.getElementById('table_wrapper');
    var _html = _div.outerHTML.replace(/ /g, '%20');

    var a = document.createElement('a');
    a.href = type + ', ' + _html;
    a.download = 'export_got_' + Math.floor((Math.random() * 9999999) + 1000000) + '.xls';
    a.click();
  });
table, tbody{
    border-style: solid;
    border-width: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <div id="table_wrapper">
    <table  cellspacing="5" cellpadding="0" bordercolor="#ccc" id="list">
      <tbody>
        <tr class="header">
          <th><input id="checkBox" type="checkbox"></th>
          <th> ID</th>
          <th> name</th>
          <th> house</th>
          <th> action</th>
        </tr>
        <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>1</td>
          <td>Jon Snow</td>
          <td>Stark</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>2</td>
          <td>James</td>
          <td>Lennister</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        <tr>
  <td><input id="checkBox" type="checkbox"></td>          
          <td>3</td>
          <td>Arya</td>
          <td>Stark</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        
        <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>4</td>
          <td>Cercei </td>
          <td>Lennister</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        
         <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>5</td>
          <td>Daenerys  </td>
          <td>Targaryen</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
      </tbody>
    </table>
  </div> 
  
  <br />

<button id="export">XABLAU</button>

Como posso gerar um arquivo .xls omitindo algumas colunas?

1 Resposta 1

1

Tem sim, basta clonar o node com .cloneNode(true) e fazer uma recursão para remover os elementos, como esta usando jQuery nem precisa da recursão, pode elimitar a primeira e a ultima coluna de cada linha usado os seletores :first-child e :last-child, assim:

$("td:first-child, th:first-child, td:last-child, th:last-child", [ELEMENTO CLONADO]).remove();

Nota: pra simplificar pode fazer assim:

tr > :first-child, tr > :last-child 

Deve ficar assim:

var type = 'data:application/vnd.ms-excel';
var _div = document.getElementById('table_wrapper').cloneNode(true);

$("tr > :first-child, tr > :last-child", _div).remove();

var _html = _div.outerHTML.replace(/ /g, '%20');

_div = null; //"Remove" o clone

Exemplo:

$("#export").click(function(e) {
    var type = 'data:application/vnd.ms-excel';
    var _div = document.getElementById('table_wrapper').cloneNode(true);

    $("tr > :first-child, tr > :last-child", _div).remove();

    var _html = _div.outerHTML.replace(/ /g, '%20');

    _div = null; //"Remove" o clone

    var a = document.createElement('a');
    a.href = type + ', ' + _html;
    a.download = 'export_got_' + Math.floor((Math.random() * 9999999) + 1000000) + '.xls';
    a.click();
 });
table, tbody{
    border-style: solid;
    border-width: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <div id="table_wrapper">
    <table  cellspacing="5" cellpadding="0" bordercolor="#ccc" id="list">
      <tbody>
        <tr class="header">
          <th><input id="checkBox" type="checkbox"></th>
          <th> ID</th>
          <th> name</th>
          <th> house</th>
          <th> action</th>
        </tr>
        <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>1</td>
          <td>Jon Snow</td>
          <td>Stark</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>2</td>
          <td>James</td>
          <td>Lennister</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        <tr>
  <td><input id="checkBox" type="checkbox"></td>          
          <td>3</td>
          <td>Arya</td>
          <td>Stark</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        
        <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>4</td>
          <td>Cercei </td>
          <td>Lennister</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        
         <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>5</td>
          <td>Daenerys  </td>
          <td>Targaryen</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
      </tbody>
    </table>
  </div> 
  
  <br />

<button id="export">XABLAU</button>


Sem jQuery:

Se um dia vier a reimplementar ou reescrever em "Vanilla" pode adaptar para:

var type = 'data:application/vnd.ms-excel';
var _div = document.getElementById('table_wrapper').cloneNode(true);

_div.querySelectorAll("tr > :first-child, tr > :last-child").forEach(function (el) {
    el.parentElement.removeChild(el);
});

var _html = _div.outerHTML.replace(/ /g, '%20');

Se quiser "retrocompatibilidade" (navegadores um pouco mais antigos):

[].forEach.call(_div.querySelectorAll("tr > :first-child, tr > :last-child"), function (el) {
    el.parentElement.removeChild(el);
});

Alternativa com jquery.table2excel

Só pra constar, isso não é um xls de verdade, é apenas uma alternativa com alguma compatibilidade, no entanto existe um plugin jquery que pode facilitar converter para xls o table2excel, exemplo:

$("#export").click(function(e) {
    var type = 'data:application/vnd.ms-excel';
    var _div = document.getElementById('table_wrapper').cloneNode(true);

    $("tr > :first-child, tr > :last-child", _div).remove();

    $(_div).table2excel({
        name: "Nome do Worksheet",
        filename: 'export_got_' + Math.floor((Math.random() * 9999999) + 1000000) //não precisa de extensão
    });

 });
table, tbody{
    border-style: solid;
    border-width: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>


  <div id="table_wrapper">
    <table  cellspacing="5" cellpadding="0" bordercolor="#ccc" id="list">
      <tbody>
        <tr class="header">
          <th><input id="checkBox" type="checkbox"></th>
          <th> ID</th>
          <th> name</th>
          <th> house</th>
          <th> action</th>
        </tr>
        <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>1</td>
          <td>Jon Snow</td>
          <td>Stark</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>2</td>
          <td>James</td>
          <td>Lennister</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        <tr>
  <td><input id="checkBox" type="checkbox"></td>          
          <td>3</td>
          <td>Arya</td>
          <td>Stark</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        
        <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>4</td>
          <td>Cercei </td>
          <td>Lennister</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
        
         <tr>
          <td><input id="checkBox" type="checkbox"></td>          
          <td>5</td>
          <td>Daenerys  </td>
          <td>Targaryen</td>
          <td><a href='#'>Eliminar</a></td>
        </tr>
      </tbody>
    </table>
  </div> 
  
  <br />

<button id="export">XABLAU</button>

9
  • Acho que funfou com a primeira coluna. xD
    – viana
    21/09/2017 às 19:54
  • @acklay eu que li a pergunta errado, corrigi. 21/09/2017 às 19:55
  • @acklay simplifique os seletores 21/09/2017 às 19:58
  • Era isso mesmo Guilherme! Vlw. Só mais uma dúvida. Quando é gerado o arquivo xls, quando abro no Excel ele vai com o fundo branco. Teria como exportar com fundo padrão do Excel?
    – viana
    21/09/2017 às 20:03
  • 1
    Agora eu entendi! daquela forma eu estava apenas criando um arquivo que seria legível usando Excel, justamente pelo fato de usar tabela e também pela extensão .xls. Obrigado mais uma vez bro. Abs;
    – viana
    22/09/2017 às 2:04

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 .