web页面如何导出特殊格式的表格 -

tonyJ

浏览: 145502 次
性别:
来自: 合肥

最近访客更多访客>>

maogewudi

starxf

jsshane

yy629

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

web页面如何导出特殊格式的表格

博客分类：

Java Web技术分析

1、实现思路
先将要导出的表格格式和数据生成页面，使用流的机制将页面内容全部获取发送到后台，后台再以流的形式写入execl中。
2、具体事例和步骤
如下图所示的表格格式

第一先将该表格格式数据写入页面中，如下图

第二在该页面中增加js方法，将页面的内容抽取并发送至后台

[#ftl]
[@b.head/]
<body onload="exportData()">
<table align="center" class="formTable" id="exportTable" style="display: none">
	<tr>
		<td>学校创新学分取得累计分值</td>
		[#list yearList as year]
			<td colspan="4">
				${year}级
			</td>
		[/#list]
	</tr>
	<tr>
		<td></td>
		[#list yearList as year]
			<td>
				竞赛类
			</td>
			<td>
				创新项目类
			</td>
			<td>
				学术论文类
			</td>
			<td>
				发明专利类
			</td>
		[/#list]
	</tr>
	<tr>
		<td>20分以上</td>
		[#list yearList as year]
			<td>
				${(forthMap.get(year).competCount)!}
			</td>
			<td>
				${(forthMap.get(year).innovateCount)!}
			</td>
			<td>
				${(forthMap.get(year).thesisCount)!}
			</td>
			<td>
				${(forthMap.get(year).patentCount)!}
			</td>
		[/#list]
	</tr>
	<tr>
		<td>11-20分(包括20分)</td>
		[#list yearList as year]
			<td>
				${(thirdMap.get(year).competCount)!}
			</td>
			<td>
				${(thirdMap.get(year).innovateCount)!}
			</td>
			<td>
				${(thirdMap.get(year).thesisCount)!}
			</td>
			<td>
				${(thirdMap.get(year).patentCount)!}
			</td>
		[/#list]
	</tr>
	<tr>
		<td>7-10分(包括10分)</td>
		[#list yearList as year]
			<td>
				${(secondMap.get(year).competCount)!}
			</td>
			<td>
				${(secondMap.get(year).innovateCount)!}
			</td>
			<td>
				${(secondMap.get(year).thesisCount)!}
			</td>
			<td>
				${(secondMap.get(year).patentCount)!}
			</td>
		[/#list]
	</tr>
	<tr>
		<td>1-6分(包括6分)</td>
		[#list yearList as year]
			<td>
				${firstMap.get(year).competCount}
			</td>
			<td>
				${firstMap.get(year).innovateCount}
			</td>
			<td>
				${firstMap.get(year).thesisCount}
			</td>
			<td>
				${firstMap.get(year).patentCount}
			</td>
		[/#list]
	</tr>
	[@b.form name="dataExportForm" action="!dataExport" target="blank"]
        <input type="hidden" name="courseTableHTML" value=""/>
    [/@]
</table>
</body>
<script>
		[#--编制导出内容--] 
	    function exportData() {
	        var outputDiv = $("<div>");
        	var excelTable = exportDataSet(); 
		    excelTable.appendTo(outputDiv);
	        $("input[name*='courseTableHTML']").val(outputDiv.html());
	        bg.form.submit("dataExportForm");
	    } 	
	    [#--编制导出表格样式和内容--]
	    function exportDataSet() {
	        var manauHTML=jQuery("#exportTable").html();
	        var excelTable = $("<table>");
	        excelTable.css("text-align", "center");
	        excelTable.attr("align", "center");
	        excelTable.attr("border", "1px");
	        excelTable.html(manauHTML);
	        excelTable.find("br").each(function(){
	           $(this).replaceWith("        ");//利用自动换行
	        });
	        excelTable.find("*").removeAttr("title");
	        excelTable.find("*").removeAttr("width");
	        excelTable.find("*").removeAttr("height");
	        excelTable.find("*").removeAttr("class");
	        excelTable.find("td").css("text-align", "center");
	        return excelTable;      
	    }
</script>
[@b.foot/]

我使用的页面是ftl格式的，主要方法是exportData(),exportDataSet()。
和这一段代码

[@b.form name="dataExportForm" action="!dataExport" target="blank"]
        <input type="hidden" name="courseTableHTML" value=""/>
[/@]

第三后台页面的dataExport方法，在struts2中使用的

        /**
	 * 导出数据
	 * @return
	 */
	public String dataExport() {
	    HttpServletResponse response = ServletActionContext.getResponse();
	    response.setHeader("Content-Disposition",	
	            "attachment;filename=dataExport.xls");
	    return forward();
	}

第四步数据输出的页面 dataExport.ftl

<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">

<head>
<meta http-equiv=Content-Type content="application/vnd.ms-excel;charset=UTF-8"> 
<meta name=ProgId content=Excel.Sheet>
</head>
<body link=blue vlink=purple>
${Parameters["courseTableHTML"]}
</body>
</html>

主要是设置导出的文件格式，注意头文件的信息。

3、导出的execl数据格式截图如下：