本文介绍了一种利用JavaScript将HTML表格数据导出为Excel文件的方法。通过几个关键步骤，包括创建导出按钮、中转页面及最终生成Excel页面，实现了从网页表格到Excel文件的转换。
结合JAVASCRIPT将HTML导入Excel形成简单Web报表，做法是把HTML中的table整个导入到Excel中,提示下载或者打开。Javascript代码:
/****************************************************
add by liqingfeng,
生成导出按钮,专门供查询配置统计页面使用,
即页面没有ifram的情况
2005-4-29
*******************************************************/
function getExcelExportButton(inTblId, btnWidth, root, formname) {
var strHtml = "";
var width=90;
if (btnWidth!=null)width=btnWidth;
//var tblWin = (!!inWindow ? inWindow : "");
//strHtml += "<form name ='xlsForm'>";
strHtml += "<input name="tablevalue" type="hidden" value="">";
if(!document.all("xlsFrm")) {
strHtml += "<iframe name="xlsFrm" width="0" height="0"></iframe>";
}
strHtml += "<table border="1" align='center' cellspacing="0" cellpadding="0" width=""+width+"">";
strHtml += " <tr class="tableButton"
onClick="javascript:getXlsFromJsp('" + inTblId + "','" + root + "','" + formname +"')" "
+ "onMouseOver="buttonOver(this)" onMouseOut="buttonOut(this)">";
strHtml += " <td nowrap>导出</td>";
strHtml += " </tr>";
strHtml += "</table>";
//strHtml += "</form>";
document.writeln(strHtml);
//getGlobeHideFrame();
}
/************************************************
add by liqingfeng,
专门供查询配置统计页面使用,
即页面没有ifram的情况
2005-4-29
*********************************************************/
function getXlsFromJsp(id, root, formname){
//var tblDocument = eval(frmName).document;
var tblFromname = document.all(formname);
var curTbl = document.all(id);
var tableValue = curTbl.innerHTML ;
tblFromname.tablevalue.value = tableValue;
//alert(""+curTbl.innerHTML );
window.open( root + "/excel_transfer.jsp?formname=" +
formname,"def","Height = max ,Width = max");
}
测试的HTML:
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<head><title>Test</title></head>
<body>
<form name = “form1”>
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=2 width=1200 align=center border=1>
<TR>
<TD align=middle width="10%" height=20 rowSpan=2>项目 </TD>
<TD align=middle width="2%" height=20 rowSpan=2>计量单位 </TD>
<TD align=middle width="4%" height=20>满期赔付率 </TD>
</TR>
</TABLE>
<script>getExcelExportButton2('collate', 'frmInfoList','90','/root','form1')</script>
</form>
</body>
</HTML>
点击导出按钮,页面转入excel_transfer.jsp 进行中转处理
excel_transfer.jsp:
<%@ page contentType="text/html; charset=gb2312" %>
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head><title>excel transfer</title></head>
<body>
<!--
/********************************************
中转页面,由这个页面跳转到最终生成Excel页面
jsp name: excel_transfer.jsp
Author : LiQingfeng
Date : 2005-4-29
********************************************/
-->
<!--
<script language="JavaScript">
document.write(opener.form1.tablevalue.value);
</script>
-->
<form name = "form2" method = "post" action = "excel_create.jsp">
<input name="tablevalue2" type="hidden" value="">
<script language="JavaScript">
var forname = "<%=request.getParameter("formname")%>";
form2.tablevalue2.value = opener.document.all(forname).tablevalue.value;
form2.submit();
</script>
</body>
</HTML>
excel_create.jsp:
<%@ page contentType="text/html; charset=gb2312" %>
<%response.setContentType("application/vnd.ms-excel;charset=gb2312"); %>
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head><title>create excel</title></head>
<body>
<!--
/********************************************
最终生成Excel页面,导出成Excel
jsp name: excel_transfer.jsp
Author : LiQingfeng
Date : 2005-4-29
********************************************/
-->
<!--
<script language="JavaScript">
document.write(opener.form1.tablevalue.value);
</script>
-->
<TABLE borderColor=#111111 cellSpacing=0 cellPadding=2 width=1200 align=center border=1>
<%=request.getParameter("tablevalue2")%>
</TABLE>
</body>
</HTML>
/****************************************************
add by liqingfeng,生成导出按钮,专门供查询配置统计页面使用,即页面没有ifram的情况2005-4-29*******************************************************/function getExcelExportButton(inTblId, btnWidth, root, formname) { var strHtml = ""; var width=90; if (btnWidth!=null)width=btnWidth; //var tblWin = (!!inWindow ? inWindow : ""); //strHtml += "<form name ='xlsForm'>"; strHtml += "<input name="tablevalue" type="hidden" value="">"; if(!document.all("xlsFrm")) {
strHtml += "<iframe name="xlsFrm" width="0" height="0"></iframe>"; } strHtml += "<table border="1" align='center' cellspacing="0" cellpadding="0" width=""+width+"">"; strHtml += " <tr class="tableButton" onClick="javascript:getXlsFromJsp('" + inTblId + "','" + root + "','" + formname +"')" "
+ "onMouseOver="buttonOver(this)" onMouseOut="buttonOut(this)">"; strHtml += " <td nowrap>导出</td>"; strHtml += " </tr>"; strHtml += "</table>"; //strHtml += "</form>"; document.writeln(strHtml); //getGlobeHideFrame();}/************************************************add by liqingfeng,专门供查询配置统计页面使用,即页面没有ifram的情况2005-4-29*********************************************************/ function getXlsFromJsp(id, root, formname){ //var tblDocument = eval(frmName).document; var tblFromname = document.all(formname); var curTbl = document.all(id); var tableValue = curTbl.innerHTML ; tblFromname.tablevalue.value = tableValue; //alert(""+curTbl.innerHTML ); window.open( root + "/excel_transfer.jsp?formname=" + formname,"def","Height = max ,Width = max");
}测试的HTML:
<HTML><meta http-equiv="Content-Type" content="text/html; charset=GBK"><head><title>Test</title></head><body><form name = “form1”><TABLE borderColor=#111111 cellSpacing=0 cellPadding=2 width=1200 align=center border=1> <TR> <TD align=middle width="10%" height=20 rowSpan=2>项目 </TD> <TD align=middle width="2%" height=20 rowSpan=2>计量单位 </TD> <TD align=middle width="4%" height=20>满期赔付率 </TD> </TR></TABLE><script>getExcelExportButton2('collate', 'frmInfoList','90','/root','form1')</script></form></body></HTML>点击导出按钮,页面转入excel_transfer.jsp 进行中转处理
excel_transfer.jsp:<%@ page contentType="text/html; charset=gb2312" %><HTML><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><head><title>excel transfer</title></head><body><!--/******************************************** 中转页面,由这个页面跳转到最终生成Excel页面 jsp name: excel_transfer.jsp Author : LiQingfeng Date : 2005-4-29********************************************/--><!--<script language="JavaScript">document.write(opener.form1.tablevalue.value);</script>--><form name = "form2" method = "post" action = "excel_create.jsp"><input name="tablevalue2" type="hidden" value=""> <script language="JavaScript"> var forname = "<%=request.getParameter("formname")%>"; form2.tablevalue2.value = opener.document.all(forname).tablevalue.value; form2.submit(); </script></body></HTML>excel_create.jsp:<%@ page contentType="text/html; charset=gb2312" %><%response.setContentType("application/vnd.ms-excel;charset=gb2312"); %><HTML><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><head><title>create excel</title></head><body><!--/******************************************** 最终生成Excel页面,导出成Excel jsp name: excel_transfer.jsp Author : LiQingfeng Date : 2005-4-29********************************************/--><!--<script language="JavaScript">document.write(opener.form1.tablevalue.value);</script>--><TABLE borderColor=#111111 cellSpacing=0 cellPadding=2 width=1200 align=center border=1> <%=request.getParameter("tablevalue2")%></TABLE></body></HTML>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
