导出过滤后的 HTML 表格并绕过格式错误的最佳方法？

如何解决导出过滤后的 HTML 表格并绕过格式错误的最佳方法？

我有一个页面，其中的表格由数据库中的员工列表填充。

在我有 JavaScript 代码的页面上，过滤表格以隐藏任何不需要的信息（站点和区域）

function filterTable() {
    var input1,input2,filter1,filter2,table,tr,td1,td2,i;
    input1 = document.getElementById("site");
    filter1 = input1.value.toupperCase();
    input2 = document.getElementById("region");
    filter2 = input2.value.toupperCase();
    table = document.getElementById("employeeTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td1 = tr[i].getElementsByTagName("td")[56]; //  Site
        td2 = tr[i].getElementsByTagName("td")[58]; //  Region
        if (td1 || td2) {
            if (td1.innerHTML.toupperCase().indexOf(filter1) > -1 && td2.innerHTML.toupperCase().indexOf(filter2) > -1) {
                tr[i].style.display = "";
                if (tr[i].classList.contains("hidden")) {
                    tr[i].classList.remove("hidden");
                }
            } else {
                tr[i].style.display = "none";
                if (!tr[i].classList.contains("hidden")) {
                    tr[i].className += "hidden";
                }
            }
        }
    }
}

目前我也在使用 JavaScript 将过滤后的表格导出到 Excel 表格中：

function exportExcel(id,name = "Employees") { //   <table> id and filename
    var today = new Date();
    var date = ('0' + today.getDate()).slice(-2) + "-" + ('0' + (today.getMonth() + 1)).slice(-2) + "-" + today.getFullYear();

    var file_name = name + "_" + date + ".xls"; //filename with current date,change if needed
    var Meta = '<Meta http-equiv="content-type" content="text/html; charset=UTF-8" />';
    var html = $("#" + id).clone();

    html.find('.hidden').remove(); //   add the class of elements you do not want to show in the excel
    //  remove links,leave text only
    //html.find('a').each(function () {
    //    var txt = $(this).text();
    //    $(this).after(txt).remove();
    //});
    html.find('input,textarea').each(function () { //replace inputs for their respectives texts
        var txt = $(this).val().replace(/\r\n|\r|\n/g,"<br>");
        $(this).after(txt).remove();
    });
    html.find('select').each(function () { //replace selects for their selected option text
        var txt = $(this).find('option:selected').text();
        $(this).after(txt).remove();
    });
    html.find('br').attr('style',"mso-data-placement:same-cell"); //make line breaks show in single cell
    html = "<table>" + html.html() + "</table>";

    var uri = 'data:application/vnd.ms-excel,' + encodeURIComponent(Meta + html);
    var a = $("<a>",{ href: uri,download: file_name });
    $(a)[0].click();
}

我的问题是我收到以下错误消息：

“文件名”的文件格式和扩展名不匹配。该文件可能已损坏或不安全。除非您相信其来源，否则请勿打开它。

我看到文件本身是一个网页（*.htm、*.html），这就是为什么这个错误仍然存​​在。

如何更正此代码，以便改为导出 *.xls 或 *.xlsx 文件？

或者，使用控制器和 MVC 有没有更好的方法来做到这一点？