Export to excel via javascript, put name in file

Question

Guys I use the very simple routine below to export to excel, it works cool, but I would like to give a name to the file when exporting, but I didn’t want to use plugins or huge functions just add a name to the file if possible

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

Currently the browser bears the name Download(1). xls, Download(2). xls etc I would like to set a name of my own, I saw some examples here in Stack but I would have to change my codes

Answer 1

You could do something like this:

$("#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>

In short, I only create one element a and assign the link and name. After that, just call the event click().

References: jquery - Export table to Excel

Answer 2

complementing Randrade’s response

it is possible to change the lines of

$("#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();
});

for :

$(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();
            });
        });

so the accents will remain correctly, and we can export larger tables using bloob

remembering that you should have the script below and a button on the page for export

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

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