Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browser

javascript

exporting-tables

cross-browser-support

data-uris

byNikita Barsukov·Sep 10, 2024

Let's get right to it. Here is a simple JavaScript function to export HTML table data to Excel in Chrome:

function exportTableToExcel(tableId, filename = 'the_data_you_needed.xls') {
    let dataType = 'application/vnd.ms-excel';
    let tableSelect = document.getElementById(tableId);
    let tableHTML = encodeURIComponent(tableSelect.outerHTML.replace(/ or .*?>/g, '>')); // That regex there? Sorta like a little vacuum cleaner for your HTML.
    let link = document.createElement("a");
    link.href = `data:${dataType}, ${tableHTML}`;
    link.download = filename;
    link.click();
}

// Usage:
exportTableToExcel('tableID'); // 'tableID' is the guy you'd like to export. Suited up and ready for Excel!

Note: Get this done with pure JavaScript, no JQuery required. Just call the function exportTableToExcel() with your table's ID and optionally, a filename. This script creates a secretly stealthy link with the table's encoded HTML content, and simulates a click to download the file. Handles Chrome and even rubs along well with other modern browsers.

Peeling the onion: A closer look at exporting to Excel

There are a few layers when exporting tables to Excel. First, you need to clean up the table by removing irrelevant HTML elements. Nobody wants random scripts or buttons in their crisp Excel file, right?

Cross-browser support is like your favorite superhero's cape — protect as many users as possible. Use document.execCommand for Internet Explorer (yes, people still use that!😉). For other modern browsers, a data URL with the help of encodeURIComponent should do the trick.

Consider integrating DataTables plugin for interactive tables. It offers handy export functionalities that play nicely with Chrome and other browsers.

One more thing, mark your tables with unique identifiers. This will help you pick the right table without the Cinderella slipper routine.

Finally, make sure to put on the right disguise when you sneak your table into Excel. Set the MIME type as data:application/vnd.ms-excel in the data URI scheme. It's like the secret handshake that gets your HTML table past the Excel file bouncer.

Prepping for a smooth move: Key tips

Seeing the infamous Excel warning about file format and extension is like finding your favorite vase broken during the move. Prevent such heartbreaks by tweaking your JavaScript to handle the .xlsx extension for Chrome.

Remember, it's a multilingual world out there. Use TextEncoder or equivalent methods to ensure your export elegantly handles different character sets. Think of it as wrapping your Japanese vase appropriately for the move.

And don't forget organization. Replace complex onclick handlers with direct calls to the JavaScript function. Your HTML structure will thank you for reducing the clutter.

Need a demo? The live example links in the references section are like your neighborhood open houses. Take a tour and see the moving process in action!

Finally, consider automating your move, especially in a Chrome environment. Develop a Chrome extension that takes care of the moving (exporting) quietly in the background while you enjoy your cup of coffee.

explain-codes / Javascript / Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browser

Linked

Setting fixed width for HTML table columns regardless of cell content size



Import CSV file into SQL Server



Create table with jQuery - append



How to prevent text in a table cell from wrapping



I want to align the text in a <td> to the top

