JavaScript: Export HTML Table to Excel With Custom File Name
Web browser wars hurt developers’ hearts. It is mostly about CSS, sometimes about JavaScript, HTML etc…
Thus I know how it feels when you expect something to get done easily appears a lot more harder than you expected.
Code below is tested only with Chrome (24+). It is making these processes:
Gets the HTML code of your table inside your div element.
Replaces the spaces in the code with correct syntax for Excel (otherwise spaces will be removed in your Excel sheet).
Generates a specific file name (for minutes) in order to avoid overriding old files and to supply archiving by date values.
And lastly and most importantly, saving the file with a custom file name.
Here’s my combination of codes (from different SO questions or tutorials) if you want to save HTML table to client computer using JavaScript code.
$(document).ready(function() {
$("#btnExport").click(function(e) {
//getting values of current time for generating the file name
var dt = new Date();
var day = dt.getDate();
var month = dt.getMonth() + 1;
var year = dt.getFullYear();
var hour = dt.getHours();
var mins = dt.getMinutes();
var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
//creating a temporary HTML link element (they support setting file names)
var a = document.createElement('a');
//getting data from our div that contains the HTML table
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;
//setting the file name
a.download = 'exported_table_' + postfix + '.xls';
//triggering the function
a.click();
//just in case, prevent default behaviour
e.preventDefault();
});
});Ed: AI-summarized comments from the original page (my old blog):
User successfully executed the code but couldn’t see the excel file.
Author explains that a “Save File” dialog should pop up and provides a jsfiddle example:
http://jsfiddle.net/kublaios/8ZQN4/1/
User states the jsfiddle code only works in Chrome, not Mozilla or IE, and needs multi-browser support.
Author mentions testing only in Chrome and suggests checking for libraries/components like:
http://www.datatables.net/extras/tabletools/
User asks how to remove paging before exporting to excel.
Author suggests checking a similar Stack Overflow issue with KendoGrid export:
http://stackoverflow.com/questions/15239920/my-kendogrid-export-functionality-is-not-working-properly
User reports the example works on jsfiddle but the button does nothing on their server.
Author suggests validating HTML with http://jsbeautifier.org/ and checking element order.
User reports the code stopped working and instead of an XLS file, they get a simple file named ‘download’ with the HTML table content.
Another user confirms the issue and attributes it to a recent Chrome update, linking to a Chromium issue: https://code.google.com/p/chromium/issues/detail?id=373182
User asks how to fit the print size to A4 in Excel.
Author suggests checking the
data:application/vnd.ms-excelheader line for possible adjustments and refers to a Gist with different export codes.
User is concerned about the table being too long causing crashes.
Author suggests splitting the table into subtables for export, linking an earlier comment about the crash happening on
a.click()due to too many characters.
User suggests a fix that works in Firefox and Chrome, providing a jsfiddle:
http://jsfiddle.net/terryyounghk/KPEGU/User reports that a provided snippet works for a small table but crashes on large ones on the
a.click()line, suspecting a character limit inhref.