結合JAVASCRIPT將HTML導入Excel形成簡單Web報表

2019-11-18 16:25:55

字體：大中小

來源：轉載

供稿：網友

        結合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>