报表导出到word或者excel的功能实现

本文实现效果，点击导出实现遮罩层效果，同时弹出窗口选择word还是excel，js中通过在页面创建一个表单将报表内容传递 到action进行保存，将内容下载为excel格式即可保存。但是要拼接样式。  页面内容不能通过 ajax传递 ，因为ajax不支持表单下载。

-----------------------------------------------------------------------------------------------------

jsp页面内容

<div class="tubai" id="showbtn">

<img src="../resource/images/dc.png"> 导出
</div>
<div class="content">
<div class="rq" id="title">
<s:property value="title" />
</div>
</div>
</div>
</div>
<div class="content">
<div class="navtworightbottom" id="content">
<s:property value="html" escape="false" />
</div>
</div>
</div>
<!--第1页-->

</div>

<!-点击导出按钮弹出导出选择窗口->

<div id="exportWindowHtml">
<p class="showbtn">
<a href="javascript:void(0);"></a>
</p>
<div id="bgExportWindow"></div>
<div class="box" style="display: none">
<div
style="width: 336px; height: 174px; background: url(../resource/images/which.png) no-repeat 18px 57px; border: 1px solid #cbcaca">
<div id="topExportWindow">
<p class="exportWindow"
style="color: #fff; margin-left: 10px; line-height: 27px; float: left;">提示</p>
<button class="exportWindow"
style="width: 13px; height: 11px; float: right; margin-top: 5px; margin-right: 5px; background: #4780c8">
<div class="close">
<img src="../resource/images/gb.png">
</div>
</button>
</div>
<p class="exportWindow"
style="color: #555; font-size: 18px; margin-left: 107px; margin-top: 34px;">请选择您的导出方式</p>
<div style="width: 336px; height: 27px; margin-top: 50px;">
<button type="submit" class="exportWindow" id="exportWord"
style="width: 101px; height: 27px; background: #6299e0; float: right; margin-right: 12px;">
<p class="exportWindow"
style="line-height: 27px; font-size: 14px; color: #fff; margin-left: 0px;">导出Word</p>
</button>
<button type="submit" class="exportWindow" id="exportExcel"
style="width: 101px; height: 27px; background: #6299e0; float: right; margin-right: 12px;">
<p class="exportWindow"
style="line-height: 27px; font-size: 14px; color: #fff; margin-left: 0px;">导出Excel</p>
</button>
</div>

</div>

-----------------------------------------------------------------------------------------------------------------------------------

//js文件  实现弹窗后页面的遮罩层功能

$(function() {
$("#showbtn").click(
function() {
$("#bgExportWindow").css({
display : "block",
height : $(document).height()
});
var $box = $(".box");
$box.css({
// 设置弹出层距离左边的位置
left : ($("body").width() - $box.width()) / 2 - 20 + "px",
// 设置弹出层距离上面的位置
top : ($(window).height() - $box.height()) / 3
+ $(window).scrollTop() + "px",
display : "block"
});


});
// 点击关闭按钮的时候，遮罩层关闭
$(".exportWindow").click(function(){
$(".box").css("display", "none");;
$("#bgExportWindow").css("display", "none");;
})
});

//选择导出到excel
$(function() {
$("#exportExcel").click(
function() {
var contentHtml = $(".content").html();
var contentHtml2 = $(".content").last().html();
var exportForm = document.createElement("form");
document.body.appendChild(exportForm);
exportForm.method = 'post';
exportForm.action = "../export";
var contentInput = document.createElement("input");
exportForm.appendChild(contentInput);
contentInput.setAttribute("id", "contentHtml");
contentInput.setAttribute("name", "contentHtml");
document.getElementById("contentHtml").value = contentHtml
+ contentHtml2;
exportForm.submit();
document.body.removeChild(exportForm);
$("#bgExportWindow,.box").css("display", "none");


});
})

//选择导出到excel
$(function() {
$("#exportWord").click(
function() {
var contentHtml = $(".content").html();
var contentHtml2 = $(".content").last().html();
var exportForm = document.createElement("form");
document.body.appendChild(exportForm);
exportForm.method = 'post';
exportForm.action = "../exports";
var contentInput = document.createElement("input");
exportForm.appendChild(contentInput);
contentInput.setAttribute("id", "contentHtml");
contentInput.setAttribute("name", "contentHtml");
document.getElementById("contentHtml").value = contentHtml
+ contentHtml2;
exportForm.submit();
document.body.removeChild(exportForm);
$("#bgExportWindow,.box").css("display", "none");
});
});

-----------------------------------------------------------------------------------------------------------------

exportwindow.css  文件内容  负责弹出 窗口时的样式

.box {
position: absolute;
width: 336px;
left: 50%;
height: auto;
z-index: 100;
background-color: #fff;
border: 1px #ddd solid;
padding: 1px;
}


.box h2 {
height: 25px;
font-size: 14px;
background-color: #aaa;
position: relative;
padding-left: 10px;
line-height: 25px;
color: #fff;
}


.box h2 a {
position: absolute;
right: 5px;
font-size: 12px;
color: #fff;
}


.box .list {
padding: 10px;
}


.box .list li {
height: 24px;
line-height: 24px;
}


.box .list li span {
margin: 0 5px 0 0;
font-family: "����";
font-size: 12px;
font-weight: 400;
color: #ddd;
}


.showbtn {
font: bold 24px '΢���ź�';
}


#bgExportWindow {
background-color: #666;
position: absolute;
z-index: 99;
left: 0;
top: 0;
display: none;
width: 100%;
height: 100%;
opacity: 0.5;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
}


p.exportWindow, button.exportWindow {
margin: 0;
padding: 0;
border: none;
list-style: none;
font-weight: normal;
font-family: "΢���ź�";
}


#topExportWindow {
width: 336px;
height: 27px;
background: #4780c8
}

-------------------------------------------------------------------------------------------------------

导出的action

@Action(value = "export")
public class ExportExcel extends BaseAction {
public String execute() { 
HttpServletRequest request = this.getRequest();
HttpServletResponse response = (HttpServletResponse) ActionContext
.getContext().get(org.apache.struts2.StrutsStatics.HTTP_RESPONSE);
try {
StringBuffer myBuffer = new StringBuffer();
String contentHtml = request.getParameter("contentHtml");
myBuffer.append("<html><head><style type=\"text/css\">" 
+"table {width:auto;height:auto;border-collapse:collapse } " 
+"tr {width:auto;height:35px;}" 
+"td {width:300px;height:35px;text-align: center;line-height:35px;color:#000;border:1px solid #ccc;width: 100px!important; margin: 0 auto;}" 
+"</style></head><body>"
+ "<body>");
myBuffer.append(contentHtml);
myBuffer.append("</body></html>");
byte[] data = myBuffer.toString().getBytes("GBK");
int length = data.length; 
SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd");
String fileName = "report" + "_" + dateformat.format(new Date()) + ".xls";
response.setCharacterEncoding("GBK");
response.setContentType("application/msexcel");
response.setHeader("Content-Disposition",
"attachment;filename="+fileName);
response.setContentLength(length);
response.getOutputStream().write(data);
response.getOutputStream().flush();
response.getOutputStream().close();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}

//word的格式

response.setContentType("application/msword");