HTML的table表格导出为excel的两种方式

使用 a 标签 download 属性，将文件名和后缀名拼接下载。

注意：如果是后台生成的纯前端表格可以使用此方法，此方法可以将 table 内的 css 样式进行保留，不能导出 td 标签中 input 输入框的值。但是可以在导出前将 input 的值取出并替换在 td 里面的值即可导出。

<script type="text/javascript" charset="utf-8">
    function base64(content) {
    	return window.btoa(unescape(encodeURIComponent(content)));
    }
    function tableToExcel(tableID) {
    	var excelContent = $("#" + tableID).html();
    	var excelFile = "<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'>";
    	excelFile += "<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>";
        excelFile += "<body><table width='10%'  border='1'>";
        excelFile += excelContent;
        excelFile += "</table></body>";
        excelFile += "</html>";
        var link = "data:application/vnd.ms-excel;base64," + base64(excelFile);
        var a = document.createElement("a");
        var fileName = $("#filename").val();
        a.download = fileName + ".xlsx";
        a.href = link;
        a.click();
	}
</script>

使用 jquery 的 table2excel 插件导出 excel。

注意：此方法可以导出 td 标签中 input 输入框的值，但是不能将 table 内的 css 样式进行保留。可以更改此插件源码进行 css 样式编写。

function table2excel(){
	$("#table2excel").table2excel({
		// 不被导出的表格行的class类
		exclude: ".noExl",
		// 导出的Excel文档的名称
		name: "表格-" + new Date().getTime(),
		// Excel文件的名称
		filename: $("#filename").val(),
		//文件后缀名
		fileext: ".xls",
		//是否导出图片
		exclude_img: false,
		//是否导出超链接
		exclude_links: false,
		//是否导出输入框中的内容
		exclude_inputs: false
	});
}

这是我目前知道的 HTML 表格导出 excel 两种方式，请各位根据自己的需求进行选择。