Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browser
Exporting HTML Table Data to Excel: Fixing the Chrome Browser Issue
If you've ever tried to export HTML table data to Excel using JavaScript or jQuery, you might have encountered some challenges when using the Chrome browser. The script that works perfectly in Mozilla Firefox fails to produce the desired result in Chrome. In this blog post, we will address this specific problem and provide you with an easy solution.
The Problem
When attempting to export HTML table data to Excel using the provided script, Chrome doesn't display the pop-up dialog box asking you to open or save the file. Instead, it downloads a file with a generic "file" type, without any file extension like ".xls". Surprisingly, there are no related errors shown in the Chrome console, making it more challenging to identify the issue.
Example and Reproduction
To better understand the problem, let's look at a Jsfiddle example: http://jsfiddle.net/insin/cmewv/.
In this example, when you click on the "Export to Excel" button, it should ideally prompt you to open or save the Excel file. Unfortunately, in the Chrome browser, the pop-up dialog box doesn't appear, and the file is downloaded with a generic file type.
To reproduce the issue, follow these steps:
Click on the "Export to Excel" button.
Observe the downloaded file with the generic file type.
The Solution
To fix the issue and ensure proper functionality across all browsers, including Chrome, we need to make a minor modification to the existing script. By adding a file extension and setting the appropriate Content-Type header, we can prompt the browser to recognize the file as an Excel file.
Update your script as follows:
<script type="text/javascript">
function ExportToExcel(mytblId){
var htmltable= document.getElementById('my-table-id');
var html = htmltable.outerHTML;
// Add the file extension and set Content-Type header
var uri = 'data:application/vnd.ms-excel;base64,';
// Create a new XLSX file using the HTML table data
var template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
<head><meta charset='UTF-8'></head>
<body>${html}</body>
</html>`;
// Convert the template to base64
var base64 = function(s) {
return window.btoa(unescape(encodeURIComponent(s)));
};
// Append the base64-encoded template to the URI
var url = uri + base64(template);
// Open the URL in a new window/tab
window.open(url);
}
</script>With this updated script, when you click on the "Export to Excel" button, Chrome (and other browsers) will now display the pop-up dialog box, allowing you to open or save the file with the correct ".xls" extension.
Conclusion and Call-to-Action
Exporting HTML table data to Excel is a common task in web development, and compatibility across different browsers is crucial. By implementing the solution provided in this blog post, you will be able to overcome the issue with Chrome and maintain consistent functionality across all browsers.
If you found this guide helpful or have any additional questions, please share your thoughts in the comments section below. Happy exporting! 🚀💪😊
