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

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

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

函数filterTable（）{
var输入1、输入2、过滤器1、过滤器2、表格、tr、td1、td2、i；
input1=document.getElementById（“站点”）；
filter1=input1.value.toUpperCase（）；
input2=document.getElementById（“区域”）；
filter2=input2.value.toUpperCase（）；
table=document.getElementById（“employeeTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1和&td2.innerHTML.toUpperCase（）.indexOf（filter2）>-1）{
tr[i].style.display=“”；
if（tr[i].classList.contains（“隐藏”））{
tr[i].classList.remove（“hidden”）；
}
}否则{
tr[i].style.display=“无”；
如果（！tr[i].classList.contains（“隐藏”））{
tr[i].className+=“隐藏”；
}
}
}
}
}

目前，我还使用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();
}

函数exportExcel（id，name=“Employees”）{//id和文件名
var today=新日期（）；
var date=（'0'+today.getDate（））.slice（-2）+“-”+（'0'+（today.getMonth（）+1））.slice（-2）+“-”+today.getFullYear（）；
var file_name=name+“”+date+“.xls”；//当前日期的文件名，需要时更改
var meta=''；
var html=$（“#”+id）.clone（）；
html.find（'.hidden'）.remove（）；//添加不希望在excel中显示的元素类
//删除链接，只保留文本
//html.find（'a'）。每个（函数（）{
//var txt=$（this.text（）；
//$（this）.after（txt.remove（）；
//});
find（'input，textarea'）。每个（函数（）{//替换各自文本的输入
var txt=$（this）.val（）.replace（/\r\n |\r |\n/g，“
”）；
$（this）.after（txt.remove（）；
});
find（'select'）。每个（函数（）{//replace）为其所选选项文本进行选择
var txt=$（this）.find（'option:selected'）.text（）；
$（this）.after（txt.remove（）；
});
html.find（'br'）.attr（'style'，“mso数据放置：同一单元格”）；//在单个单元格中显示换行符
html=“”+html.html（）+”；
var uri='data:application/vnd.ms excel'，+encodeURIComponent（meta+html）；
var a=$（“”，{href:uri，下载：file_name}）；
$（a）[0]。单击（）；
}

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

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

我看到该文件本身是一个网页（*.htm，*.html），这就是此错误持续存在的原因

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

或者，是否有更好的方法使用控制器和MVC进行此操作？

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();
}