使用JS实现分页打印(复选框勾选打印)
需要用到table的page-break-after: always;
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function ckAll(){
var flag = document.getElementById("allcheck").checked;
var cks = document.getElementsByName("check");
for(var i =0;i<cks.length;i++){
cks[i].checked = flag;
}
}
function sub(){
//获取名为check的复选框
var cks = document.getElementsByName("check");
//获取打印的div
var print_div=document.getElementById("print");
//用于存储需要打印的所有数据
var content="";
//用于存储每页需要打印的数据
var str="";
//获取复选框被选中的个数
var checklen=$("input[name='check']:checked").length;
//以名为check的复选框个数作为条件循环
for(var i = 0;i<cks.length;i++){
//过滤被选中的复选框
if(cks[i].checked){
//将被勾选的复选框的值赋值到打印div里
var td =document.getElementById("table").rows[i+1].cells[1].innerHTML;
var name=document.getElementById("table").rows[i+1].cells[2].innerHTML;
var age=document.getElementById("table").rows[i+1].cells[3].innerHTML;
var birth=document.getElementById("table").rows[i+1].cells[4].innerHTML;
$("#lbl_id").text(td);
$("#lbl_name").text(name);
$("#lbl_age").text(age);
$("#lbl_birth").text(birth);
//将被勾选的复选框数据循环添加到content
str = document.getElementById("print").innerHTML;
content = content+str;
//每循环一次被选中的复选框个数-1
checklen--;
//当被选中的复选框个数为0开始打印
if(checklen==0){
var printStr="<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>";
printStr = printStr+content+"</body></html>";
var pwin = window.open("Print.htm","print");
pwin.document.write(printStr);
pwin.document.close();
pwin.print();
}
//bdhtml=window.document.body.innerHTML; //获取当前页的html代码
//sprnstr="<!--startprint-->"; //设置打印开始区域
//eprnstr="<!--endprint-->"; //设置打印结束区域
// prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始代码向后取html
// prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //从结束代码向前取html
// window.document.body.innerHTML=prnhtml;
// window.print();
}
}
}
</script>
</head>
<body>
<div id="ck">
<table id="table">
<tr>
<td><input type="checkbox" id="allcheck" onclick="ckAll()"/></td>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
</tr>
<c:forEach items="${list}" var="list">
<tr>
<td><input type="checkbox" name="check" id="check" value="${list.id}"/></td>
<td id="id" >${list.id}</td>
<td id="name">${list.name}</td>
<td id="age">${list.age }</td>
<td id="birth">${list.birth }</td>
</tr>
</c:forEach>
</table>
<button onclick="sub()">提交</button>
</div>
<div id="print" style="display:none ;">
<table style="page-break-after: always;">
<h1>用户信息</h1>
<label>编号</label>
<label name="lbl_id" id="lbl_id"></label>
<label>姓名</label>
<label name="lbl_name" id="lbl_name"></label>
<label>年龄</label>
<label name="lbl_age" id="lbl_age"></label>
<label>生日</label>
<label name="lbl_birth " id="lbl_birth"></label>
</table>
</div>
</body>
</html>
