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

1、实现思路
先将要导出的表格格式和数据生成页面，使用流的机制将页面内容全部获取发送到后台，后台再以流的形式写入execl中。
2、具体事例和步骤
如下图所示的表格格式
[img]http://dl2.iteye.com/upload/attachment/0105/3970/5f9254ac-60d1-38fe-9feb-6dcb5bda13d1.png[/img]

第一先将该表格格式数据写入页面中，如下图
[img]http://dl2.iteye.com/upload/attachment/0105/3972/ae3418f4-6531-3c23-9388-419f72e1238f.png[/img]

第二在该页面中增加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数据格式截图如下：

[img]http://dl2.iteye.com/upload/attachment/0105/3974/f278c626-6f5f-3f4d-804c-df878d6bbcc7.png[/img]

这种导出方式可以导出格式不正规的表格，很方便。