目录

1、先创建 html 的表格,并指定表格唯一ID:impTable​编辑

 2、定义导出表格的函数方法 toExcel()。


应用场景,页面就是普通的 html 。

例如要导出这个示例Table表格。

html table 如何导出为excel表格案例分享

 先来看看导出的表格如下:

html table 如何导出为excel表格案例分享

1、先创建 html 的表格,并指定表格唯一ID:impTablehtml table 如何导出为excel表格案例分享

 2、定义导出表格的函数方法 toExcel()。

1)页面添加一个动作按钮。

<div class="searchBt" onclick="toExcel()" style="float: right;margin: 10px 20px;">导出</div>

2) 具体的 JavaScript 代码如下:

function base64(content) {
		    	return window.btoa(unescape(encodeURIComponent(content)));
		    }
		    var format = function (s, c) {
		        return s.replace(/{(\w+)}/g,
		            function (m, p) {
		                return c[p];
		            });
		    }
            //导出html表格为 excel 文件
		    function toExcel() {
		    	var excelContent = $("#impTable").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='50%'  border='1'>";
		        excelFile += excelContent;
		        excelFile += "</table></body>";
		        excelFile += "</html>";
                //定义excel 的sheet名称
		        var ctx = {worksheet: "授信审批表"};
		        var link = "data:application/vnd.ms-excel;base64," + base64(format(excelFile, ctx));
		        var a = document.createElement("a");
                //定义excel 的文件名称
		        var fileName ="授信审批表_"+$("#skrName").val();
		        a.download = fileName+".xls";
		        a.href = link;
		        a.click();
			}

是不是非常简单好用呢?而且他不需要额外的插件支持,导出的样式也还挺合适的。

对您有用的话,还请动动发财的小手帮小编一键三连吧!你的支持,是我不断输出的最大动力。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。