Cross-Browser HTML Table to Excel Export Solution Using JavaScript

Problem Background and Challenges

In modern web development, exporting HTML table data to Excel format is a common requirement. However, significant differences exist in how different browsers support data URI schemes and Excel file generation, creating compatibility challenges for developers.

The original export solution uses a simple data URI approach:

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

This solution works well in Firefox, correctly popping up an Excel file dialog with open or save options. However, in Chrome browser, this approach exhibits significant issues: files are downloaded as "file" type without extensions instead of the expected .xls format, with no error messages displayed.

Cross-Browser Compatible Solution

To address these compatibility issues, we propose a browser detection-based solution. The core concept involves adopting different export strategies based on browser-specific characteristics.

Core Implementation Code

Below is the complete cross-browser Excel export function:

function fnExcelReport() {
    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
    var j = 0;
    var tab = document.getElementById('headerTable');

    for (j = 0; j < tab.rows.length; j++) {
        tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
    }

    tab_text = tab_text + "";
    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");
    tab_text = tab_text.replace(/<img[^>]*>/gi, "");
    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");

    var msie = window.navigator.userAgent.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        txtArea1.document.open("txt/html", "replace");
        txtArea1.document.write(tab_text);
        txtArea1.document.close();
        txtArea1.focus();
        sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
    } else {
        sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
    }

    return sa;
}

HTML Structure Requirements

A hidden iframe element needs to be added to the page:

<iframe id="txtArea1" style="display:none"></iframe>

Calling method:

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>

Technical Principles Deep Analysis

Browser Detection Mechanism

The solution detects browser types through user agent string analysis:

• For Internet Explorer (including IE7+ and IE11), uses iframe and execCommand method
• For other modern browsers (Firefox, Chrome, etc.), uses data URI scheme

This dual-strategy approach ensures optimal cross-browser compatibility.

HTML Content Cleaning Strategy

To ensure correct Excel file format generation, the code implements multiple layers of content cleaning:

• Removes all hyperlink tags (<A> and </A>)
• Removes all image elements (<img>)
• Removes all input elements (<input>)

These cleaning operations are implemented through regular expressions, ensuring only pure table data is exported.

Data Format Processing

The solution adopts standard Excel MIME type (application/vnd.ms-excel) and encodes HTML content using encodeURIComponent to ensure proper handling of special characters.

Alternative Solutions Comparison

Beyond the core solution, other viable alternatives exist:

DataTables Plugin-Based Solution

DataTables plugin provides built-in export functionality supporting multiple formats including Excel, PDF, and TXT. This solution offers simple configuration and rich features but requires additional JavaScript libraries.

Base64 Encoding-Based Solution

Another approach uses Base64 encoding with more complex Excel templates, implementing file downloads through dynamic link element creation. This method provides better file naming control but involves more complex implementation.

Best Practice Recommendations

Based on practical development experience, we recommend:

• Prioritize using mature libraries (like DataTables) in production environments
• Adopt the core solution presented in this paper for lightweight requirements
• Always conduct cross-browser testing, especially with latest Chrome and Edge versions
• Consider adding error handling and user feedback mechanisms
• For large datasets, recommend server-side export solutions

Conclusion

The cross-browser Excel export solution presented in this paper effectively addresses compatibility issues in Chrome browser. Through reasonable browser detection and differentiated processing strategies, consistent performance across various mainstream browsers is ensured. This solution features concise code and easy integration, providing web developers with a reliable table data export tool.