2

Tenho uma tabela HTML simples (mas longa) que ao selecionar e copiar (CTRL+C) para Excel, cola perfeito.

Quero adicionar um botão que faça esse processo para não ter que selecionar essa tabela enorme manualmente e simplificar esse processo. Consegui os scripts para copiar para área de transferência, mas jogando o conteúdo por innerHTML dentro de um textarea e ai copiando, mas vai o código fonte e não o "resultado".

Como posso dar um "select();" na tabela e CTRL+C sem seguida e reproduzir o mesmo efeito desejado de colar no excel? Abs

1 Resposta 1

0

Eu fiz uns testes aqui e tenho o seguinte código - JSBIN:

OBSERVAÇÂO: O CSS está no JS BIN, mas é irrelevante pro exemplo.

JAVASCRIPT

var Tabela = {
  selecionarTabela: function(el) {
    var body = document.body, range, sel;
    if (document.createRange && window.getSelection) {
        range = document.createRange();
        sel = window.getSelection();
        sel.removeAllRanges();
        try {
            range.selectNodeContents(el);
            sel.addRange(range);
        } catch (e) {
            range.selectNode(el);
            sel.addRange(range);
        }
    } else if (body.createTextRange) {
        range = body.createTextRange();
        range.moveToElementText(el);
        range.select();
    }
    try {
      document.execCommand('copy');
      range.blur();
    } catch(error){
      // Exceção aqui
    }
  }
}

var selecionaTabelaBtn = document.querySelector("#selecionar-tabela");
var tabelaDeDados = document.querySelector("#minha-tabela");
// Seleciona a tabela no clique do botão
selecionaTabelaBtn.addEventListener("click", function(){
  Tabela.selecionarTabela(tabelaDeDados);
});

HTML5

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
  <body>
    <!-- Botão de seleção -->
    <button id="selecionar-tabela">Selecionar tabela</button>
    <!-- Tabela a ser selecionada -->
    <table id="minha-tabela">
        <thead>
            <tr>
              <th>Cabeçalho</th>
              <th>Cabeçalho</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Conteúdo</td>
            <td>Conteúdo</td>
          </tr>
          <tr>
            <td>Conteúdo</td>
            <td>Conteúdo</td>
          </tr>
          <tr>
            <td>Conteúdo</td>
            <td>Conteúdo</td>
          </tr>
        </tbody>
    </table>
    <!-- \\ Fim da tabela -->
  </body>
</html>

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 .