网页打印功能实现

1、首先导入两个js和一个css（jquery-1.4.3.js、jquery.PrintArea.js、jquery-ui.css）文件到项目中。

2、打印的网页布局如下，将需要打印的内容放在打印主体的位置。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<base href="<%=basePath%>">
<title>打印表</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">


<style type="text/css">
body {
    text-align: center;
}

#printArea {
    width: 730px;
    margin: 0 auto;
}

td {
    height: 40px;
    text-align: center;
}

p {
    padding: 0px;
    margin: 0;
    font-size: 14px;
}

#images {
    padding: 1px;
}

#profile {
    width: 120px;
    height: 120px;
}

#promise_form p {
    padding: 0px;
    margin: 0;
    font-size: 14px;
}

.td_left {
    text-align: left;
}

.td_right {
    text-align: right;
}

.td_center {
    text-align: center;
}
h3{
font-family:"微软雅黑","黑体";
}
</style>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="js/jquery.PrintArea.js"></script>

<script type="text/javascript">
    $(function() {
        //打印  
        $("#btnPrint").bind("click", function(event) {

            if (!confirm("请确定是否打印报名表？确认打印后，考生将无法修改本人信息！")) {
                $("#print_tip").show();
                return false;
            } else {

                $("#print_tip").hide();
                alert("请先使用IE浏览器打印预览！");
                $("#myPrintArea").printArea();
            }
        });
    });
</script>


</head>

<body>


    <div align="center" id="print_tip" class="no-print">
        <label style="color:red; font-size:12px;">打印时请选择IE浏览器、A4纸，保证照片清晰</label>
        <input id="btnPrint" value="确认提交并打印"
            class="ui-button ui-widget ui-state-default ui-corner-all"
            role="button" aria-disabled="false" />
    </div>


    <div id="myPrintArea">
            
           网页内打印的内容主体放在这里

    </div>


</body>
</html>

 

posted on 2012-12-25 09:17  NewPanderKing  阅读(577)  评论(0)  编辑  收藏  举报

导航