function ExportToExcel() {
var htmltable = document.getElementById('exportdata');
var html = htmltable.outerHTML;
window.open('data:application/vnd.ms-excel, ' + encodeURIComponent(html));
}
Currently the browser is named Download (1) .xls, Download (2) .xls etc I would like to name it myself, I saw some examples here in Stack but would have to change my codes
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><inputtype="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 summary, I only create a a element and assign the link and name. After that, just call the event click() .
References: jquery - Export table to Excel
complementing Randrade's answer
You can 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();
});
To:
$(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><buttonid="btnExport">Exportar para Excel</button>