window.print实现分页打印功能

最新推荐文章于 2024-05-08 14:12:05 发布

遗失的思念

最新推荐文章于 2024-05-08 14:12:05 发布

阅读量6.5k

点赞数

分类专栏： JS 文章标签： window.print实现分页打印功能

本文链接：https://blog.csdn.net/LZW891967934/article/details/19123509

版权

1. 在要分页的那一条数据所属的 DOM 元素上增加样式：page-break-after: always 或 page-break-before: always，一个在这条数据前分页，一个在这条数据后分页。

2. //打印方法

function preview() {
bdhtml = window.document.body.innerHTML;
sprnstr = "";
eprnstr = "";
prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
window.document.body.innerHTML = prnhtml;
window.print();
}

3. 打印区域标记  ，

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>湖北公安监管信息综合应用平台</title>
<style type="text/css">
html,body{width:100%;margin:0px;}
table{width:95%;margin:0px auto;}
caption{font:bold 30px 宋体;line-height:50px;letter-spacing:3px;margin-bottom:15px;margin-top:15px;}
table,th,td{border:1px solid black;border-collapse:collapse;text-align:center;}
table{margin-bottom:30px;}
#table_register th{font:normal 20px 宋体;line-height:33px;}
#table_register td{font:normal 18px 宋体;line-height:33px;border:1px solid #000;}
#table_register .roomNum{height:30px;}
#table_register .outPrison{height:65px;}
#table_health th{font:normal 20px 宋体;line-height:40px;}
#table_health td{font:normal 18px 宋体;line-height:40px;}
#table_health #check{height:160px;}
#table_health .remark,#table_evaluation .remark{border-style:none;text-align:left;text-indent:1em;}
#table_health #date{border-style:none;text-align:right;}
#table_health,#table_evaluation{border-style:none;}
#table_goods th{font:normal 20px 宋体;line-height:33px;}
#table_goods td{font:normal 18px 宋体;line-height:33px;}
#table_goods .left,#table_evaluation .left{text-align:left;line-height:48px;border-bottom-style:none;text-indent:1em;}
#table_goods .date_right{text-align:right;line-height:47px;border-top-style:none;}
#table_goods .num{height:33px;}
#table_goods #law{text-indent:2em;text-align:left;}
#table_evaluation caption{margin-bottom:50px;margin-top:20px;}
#table_evaluation th{font:normal 20px 宋体;line-height:60px;}
#table_evaluation td{font:normal 18px 宋体;line-height:60px;}
#table_evaluation .white_space_left{border-top-style:none;border-right-style:none;}
#table_evaluation .white_space_right{border-top-style:none;border-left-style:none;}
#table_evaluation .signature{border-top-style:none;border-left-style:none;border-right-style:none;text-align:right;vertical-align:top;}
#table_evaluation .evaluation_team{height:140px;}
#table_evaluation .case{height:150px;}
td.left{text-align:left;text-indent:1em;border-top-style:none;}
#table_gaozhi td{font:normal 15px 宋体;line-height:16px;text-align:left;text-indent:2em;border:0px solid black;letter-spacing:2px;}
#table_gaozhi #title{font:bold 30px 宋体;line-height:50px;letter-spacing:1px;margin-bottom:15px;margin-top:15px;text-align:center;text-indent:0em;}
.table_talk td{font:normal 15px 宋体;line-height:38px;text-align:left;text-indent:2em;border-right-style:none;border-left-style:none;border-top-style:none}
.table_talk{ border:0px solid black; }
#table_gaozhi .cuti{font-weight: bold;}
</style>

<script src="${pageContext.request.contextPath}/inc/js/lib/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/inc/js/jquery.jqprint.js"></script>
<script src="${pageContext.request.contextPath}/inc/js/smohan.fixednav.js"></script>
<script>
$(document).ready(function(){
//点击打印选中页面
$("#btnprint").click(function(){
$("input[name='pageCheckbox']").each(function(){
if(!$(this).attr("checked"))
{
$(".spanCheckbox").hide();
var ID="#"+$(this).attr("value");
$(ID).hide();
//$(ID).jqprint({ printContainer: true});
$(".spanCheckbox").show();
}
})
$("#allprint").jqprint({ printContainer: true});
})

function preview() {
bdhtml = window.document.body.innerHTML;
sprnstr = "";
eprnstr = "";
prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
window.document.body.innerHTML = prnhtml;
window.print();
}

//全选，取消
$("#AllpageCheckbox").click(function(){
$("input[name='pageCheckbox']").each(function(){
if($(this).attr("checked"))
{
$(this).attr("checked",false);
}

else
{
$(this).attr("checked",true);
}
})
})
})

//固定顶部导航
$(document).ready(function(e) {
$('#top').smohanfixednav(0,999);
});
</script>

</head>
<body>
<div id="allprint">

<div id="top" style="margin:20px auto; width:95%;text-align:right;"><button id="btnprint" style="background:#006CCE;width:80px;height:50px;color:#fff;font-size:25px;cursor: pointer;font-weight:bold;">打印</button></div>
<table id="table_title" style="page-break-after:always;">
<caption>我是封面<span style="padding-left:20px;font-size:14px;"><INPUT type="checkbox" id="AllpageCheckbox" name="AllpageCheckbox" value="table_title">全选</span></caption>
</table>

<div id="div_register" style="page-break-after:always;">
<table id="table_register" style="border:1px #000 solid;" CellSpacing="0">
<caption>被拘留人登记表<span style="padding-left:20px;font-size:14px;" class="spanCheckbox"><INPUT type="checkbox" name="pageCheckbox" value="div_register">第1页</span></caption>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;width:22%">姓名</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;width:22%"><s:property value="oneprison.name" /> </td>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;width:13%">性别</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;width:13%"><s:property value="oneprison.gender.description" /> </td>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;width:20%;" rowspan="6">
<s:if test="is_has_image">
<img src="${pageContext.request.contextPath}/manage/prisoner_image.action?id=${oneprison.id}"/>
</s:if>
</td>
</tr>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">曾用名或别名</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;"><s:property value="oneprison.nickName" /> </td>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">民族</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;"><s:property value="oneprison.psoples.people" /> </td>
</tr>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">籍贯（国籍）</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;"><s:property value="oneprison.nationality.description" /> </td>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">宗教信仰</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;" ></td>
</tr>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">出生日期</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;"><s:date name="oneprison.birthday" format="yyyy年MM月dd日"/> </td>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">婚姻状况</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;"><s:property value="oneprison.marryStatus.description" /> </td>
</tr>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">文化程度</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;"><s:property value="oneprison.educationLevel.description" /> </td>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">职业</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;"><s:property value="oneprison.carer.description" /> </td>
</tr>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">工作单位</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;" colspan="3" ><s:property value="oneprison.workPlace" /> </td>
</tr>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">身份证件种类和号码</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;" colspan="4"><s:property value="oneprison.documeType.people" /> <s:property value="prisoner.documeNum" /></td>
</tr>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">户口所在地</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;"><s:property value="oneprison.accountLocation.description" /> </td>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">现住址</td>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;" colspan="2"><s:property value="oneprison.address.description" /> </td>
</tr>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">主要家庭成员及年龄、单位或者住址、联系电话</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;" colspan="4"> </td>
</tr>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">案由</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;" colspan="4"><s:property value="oneprison.crime.description" /> </td>
</tr>
<tr>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">拘留决定机关、办案单位及联系电话</th>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;"><s:property value="oneprison.handleCases.unitName" /> </td>
<td style="border:1px solid #000000;border-collapse:collapse;text-align:center;">拘留决定文书文号</th>

最低0.47元/天解锁文章

遗失的思念

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window.print实现分页打印功能

1. 在要分页的那一条数据所属的 DOM 元素上增加样式：page-break-after: always 或 page-break-before: always，一个在这条数据前分页，一个在这条数据后分页。 2. //打印方法function preview() { bdhtml = window.document.body.innerHTML; sprns
复制链接

扫一扫

专栏目录