8

Pessoal eu uso a rotina bem simples abaixo pra exportar pra excel, funciona legal, mas gostaria de dar um nome pro arquivo ao exportar, mas não queria usar plugins ou funções enormes só adicionar um nome ao arquivo, se possível

function ExportToExcel() {
            var htmltable = document.getElementById('exportdata');
            var html = htmltable.outerHTML;
            window.open('data:application/vnd.ms-excel, ' + encodeURIComponent(html));
        }

Atualmente o navegador traz o nome Download(1).xls, Download(2).xls etc Gostaria de setar um nome proprio, vi alguns exemplos aqui no Stack mas teria que mudar meus códigos

2 Respostas 2

8

Você poderia fazer algo parecido com isso:

$("#btnExport").click(function(e) {
  var a = document.createElement('a');
  var data_type = 'data:application/vnd.ms-excel';
  var table_div = document.getElementById('dvData');
  var table_html = table_div.outerHTML.replace(/ /g, '%20');
  a.href = data_type + ', ' + table_html;
  a.download = 'filename.xls';
  a.click();
  e.preventDefault();
});
body {
  font-size: 12pt;
  font-family: Calibri;
  padding: 10px;
}
table {
  border: 1px solid black;
}
th {
  border: 1px solid black;
  padding: 5px;
  background-color: grey;
  color: white;
}
td {
  border: 1px solid black;
  padding: 5px;
}
input {
  font-size: 12pt;
  font-family: Calibri;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
<br/>
<br/>
<div id="dvData">
  <table>
    <tr>
      <th>Column One</th>
      <th>Column Two</th>
      <th>Column Three</th>
    </tr>
    <tr>
      <td>row1 Col1</td>
      <td>row1 Col2</td>
      <td>row1 Col3</td>
    </tr>
    <tr>
      <td>row2 Col1</td>
      <td>row2 Col2</td>
      <td>row2 Col3</td>
    </tr>
    <tr>
      <td>row3 Col1</td>
      <td>row3 Col2</td>
      <td><a href="http://www.jquery2dotnet.com/">http://www.jquery2dotnet.com/</a>
      </td>
    </tr>
  </table>
</div>

Em resumo, apenas crio um elemento a e atribuo o link e o nome. Após isso, basta chamar o evento click().

Referências: jquery - Export table to Excel

3
  • Simples e objetivo, muito bom
    – user37466
    13/12/2016 às 21:58
  • Ao exportar ele esta bagunçando os caracteres acentuados, o tal encode, será que tem como colocar a.charset = "UTF-8" , ou algo que possa trazer os caracteres sem bagunçar?
    – user37466
    22/12/2016 às 12:10
  • Esse código não cria colunas no Excel. Ao abrir o ".xls" desse exemplo, todas as colunas ficam juntas na primeira coluna, como uma única string. 1/10/2019 às 13:19
4

complementando a resposta do Randrade

é possivel alterar as linhas de

$("#btnExport").click(function(e) {
  var a = document.createElement('a');
  var data_type = 'data:application/vnd.ms-excel';
  var table_div = document.getElementById('dvData');
  var table_html = table_div.outerHTML.replace(/ /g, '%20');
  a.href = data_type + ', ' + table_html;
  a.download = 'filename.xls';
  a.click();
  e.preventDefault();
});

para :

$(document).ready(function () {
     $("#btnExport").click(function (e) {
          e.preventDefault();
          var table_div = document.getElementById('divTabela');   
          // esse "\ufeff" é importante para manter os acentos         
          var blobData = new Blob(['\ufeff'+table_div.outerHTML], { type: 'application/vnd.ms-excel' });
          var url = window.URL.createObjectURL(blobData);
          var a = document.createElement('a');
          a.href = url;
          a.download = 'Meu arquivo Excel'
                a.click();
            });
        });

assim os acentos permanecerão corretamente, e podemos exportar tabelas maiores usando bloob

lembrando que deve ter o script abaixo e um botao na pagina para o export

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<button id="btnExport">Exportar para Excel</button>

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