Web項目小票打印分頁打印

項目需要在WEB項目中利用JS打印項目的考試標籤基本信息。之前用了很多種方式。使用了LodopFuncs。不得不說LodopFuncs功能是比較的強大。但是需要收費，否則打印出來會出現“XX測試提供的水印”，不滿足要求。

後來在網上試用了很多的方式。個人覺得傑表雲打印挺適合的，代碼簡單。

傑表打印控件的英文名稱爲jatoolsPrinter，這是專爲開發者打造的一款免費打印控件，安裝後可以加載到網頁中使用，軟件支持主流的網頁瀏覽器，比如 firefox、chrome、safari等，擁有批量打印、自動打印、表格自動分頁以及支持codabar、code39、code128等主流的二維碼打印操作，具有配置簡單，打印質量清晰以及代碼簡潔的特點。

簡單例子:

第一步：網上下載傑表雲打印的JS。

jcpfree.js （下載地址：http://www.121down.com/soft/softview-93597.html）

第二步：擼代碼

因我我需要,需要打印至少60個以上的標籤。我用ForEach循環生成。

注意：控件按照你id去選擇打印。默認是page，後面加上需要打印的後綴。此時打印搞定。

<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>打印</title>
<%
	String baseURL = request.getContextPath();
%>
<script type="text/javascript" src="<%=baseURL %>/liwei/examCard/jcpfree.js"></script>
<script>
	function doPrint(how) {
		var myDoc = {
			documents : document, // 打印頁面(div)們在本文檔中
			copyrights : '傑創軟件擁有版權  www.jatools.com' // 版權聲明必須
		};
		var jcp = getJCP();
		// 調用打印方法
		if (how == '打印預覽')
			jcp.printPreview(myDoc, false);
		else if (how == '彈出打印機選擇對話框打印') {
			jcp.print(myDoc, true);
		} else
			jcp.print(myDoc, false); // 不彈出對話框打印
		}
</script>
</head>
<body>
	<input type="button" value="打印" onClick="doPrint('打印預覽')">
	<br />
	<c:forEach items="${examCardList }" var="examCard" varStatus="status">
		<div id="page${status.index +1 }">
			<div style="width: 215px;height: 120px; margin-top:15px; margin-left:5px; border:1px solid green;font-size: 11px;">
				<div style="float: left;width: 110px">
					<div style="margin-top: 10px; margin-left: 2px;">准考證:${examCard.examCardNo }</div>
					<div style="margin-top: 10px; margin-left: 2px;">姓名:${examCard.studentName }</div>
					<div style="margin-top: 10px; margin-left: 2px;">科目:${projectValue }</div>
					<div style="margin-top: 10px; margin-left: 2px;">考場:${examCard.roomNo }</div>
					<div style="margin-top: 10px; margin-left: 2px;">畫室:${examCard.studioName }</div>
				</div>
				<div style="float: right;margin-right: 2px;" >
					<img  style="margin-top: 15px;" width="91px" height="91px"  src="<%=LwCommon.QRCODE_HTTP %>/${examCard.batchId }/${project }/${examCard.resourceId }.png">
				</div>
			</div>
		</div>
	</c:forEach>
</body>
</html>

頁面選擇打印標籤:

個人沒去研究其他的什麼辦法.只是利用了CSS去控制DIV的id。

<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>打印</title>
<%
	String baseURL = request.getContextPath();
%>
<style type="text/css">
@media print { 
 .noprint{display:none;}
}
</style>
<script type="text/javascript" src="<%=baseURL %>/liwei/examCard/jcpfree.js"></script>
<!-- jquery1.6.2 -->
<script type="text/javascript" src="<%=baseURL%>/js/jquery/jquery-ui-1.8.15.custom/js/jquery-1.6.2.min.js"></script>
<script>
	function doPrint(how) {
		var myDoc = {
			documents : document, // 打印頁面(div)們在本文檔中
			copyrights : '傑創軟件擁有版權  www.jatools.com' // 版權聲明必須
		};
		var jcp = getJCP();
		// 調用打印方法
		if (how == 'cardNo') {
			$(".cardNo").attr("id","page1");
			$(".sc").removeAttr("id");
			$(".sm").removeAttr("id");
			$(".sx").removeAttr("id");
			jcp.printPreview(myDoc, false);
		} else if (how == 's') {
			$(".sc").attr("id","page1");
			$(".cardNo").removeAttr("id");
			$(".sm").removeAttr("id");
			$(".sx").removeAttr("id");
			jcp.printPreview(myDoc, false);
		} else if (how == 'm') {
			$(".sm").attr("id","page1");
			$(".sc").removeAttr("id");
			$(".cardNo").removeAttr("id");
			$(".sx").removeAttr("id");
			jcp.printPreview(myDoc, false);
		} else if (how == 'x') {
			$(".sx").attr("id","page1");
			$(".sc").removeAttr("id");
			$(".sm").removeAttr("id");
			$(".cardNo").removeAttr("id");
			jcp.printPreview(myDoc, false);
		} 
	}
</script>
</head>
<body>
	<input type="button" value="打印准考證" onClick="doPrint('cardNo')">
	<input type="button" value="打印色彩" onClick="doPrint('s')">
	<input type="button" value="打印素描" onClick="doPrint('m')">
	<input type="button" value="打印速寫" onClick="doPrint('x')">
	<br />
	<div class="cardNo">
		<div style="width: 200px;height: 120px;font-size: 12px;border:1px solid #0099ff;margin-top:10px;margin-left:5px;">
			<div style="margin-top: 15px;margin-left: 7px;">姓名:${examCardEntity.studentName }</div>
			<div style="margin-top: 15px;margin-left: 7px;">考室:${examCardEntity.roomNo }</div>
			<div style="margin-top: 15px;margin-left: 7px;">畫室:${examCardEntity.studioName }</div>
			<div style="margin-top: 15px;margin-left: 7px;">准考證號:${examCardEntity.examCardNo }</div>
		</div>
	</div>
	<div  class="sc">
		<div style="width: 215px;height: 120px; margin-top:15px; margin-left:5px; border:1px solid green;font-size: 11px;">
			<div style="float: left;width: 110px">
				<div style="margin-top: 10px; margin-left: 2px;">准考證:${examCardEntity.examCardNo }</div>
				<div style="margin-top: 10px; margin-left: 2px;">姓名:${examCardEntity.studentName }</div>
				<div style="margin-top: 10px; margin-left: 2px;">科目:色彩</div>
				<div style="margin-top: 10px; margin-left: 2px;">考場:${examCardEntity.roomNo }</div>
				<div style="margin-top: 10px; margin-left: 2px;">畫室:${examCardEntity.studioName }</div>
			</div>
			<div style="float: right;margin-right: 2px;" >
				<img  style="margin-top: 15px;" width="91px" height="91px"  src="<%=LwCommon.QRCODE_HTTP %>/${examCardEntity.batchId }/S/${examCardEntity.resourceId }.png">
			</div>
		</div>
	</div>
	<div class="sm">
		<div style="width: 215px;height: 120px; margin-top:15px; margin-left:5px; border:1px solid green;font-size: 11px;">
			<div style="float: left;width: 110px">
				<div style="margin-top: 10px; margin-left: 2px;">准考證:${examCardEntity.examCardNo }</div>
				<div style="margin-top: 10px; margin-left: 2px;">姓名:${examCardEntity.studentName }</div>
				<div style="margin-top: 10px; margin-left: 2px;">科目:素描</div>
				<div style="margin-top: 10px; margin-left: 2px;">考場:${examCardEntity.roomNo }</div>
				<div style="margin-top: 10px; margin-left: 2px;">畫室:${examCardEntity.studioName }</div>
			</div>
			<div style="float: right;margin-right: 2px;" >
				<img  style="margin-top: 15px;" width="91px" height="91px"  src="<%=LwCommon.QRCODE_HTTP %>/${examCardEntity.batchId }/M/${examCardEntity.resourceId }.png">
			</div>
		</div>
	</div>
	<div class="sx">
		<div style="width: 215px;height: 120px; margin-top:15px; margin-left:5px; border:1px solid green;font-size: 11px;">
			<div style="float: left;width: 110px">
				<div style="margin-top: 10px; margin-left: 2px;">准考證:${examCardEntity.examCardNo }</div>
				<div style="margin-top: 10px; margin-left: 2px;">姓名:${examCardEntity.studentName }</div>
				<div style="margin-top: 10px; margin-left: 2px;">科目:速寫</div>
				<div style="margin-top: 10px; margin-left: 2px;">考場:${examCardEntity.roomNo }</div>
				<div style="margin-top: 10px; margin-left: 2px;">畫室:${examCardEntity.studioName }</div>
			</div>
			<div style="float: right;margin-right: 2px;" >
				<img  style="margin-top: 15px;" width="91px" height="91px"  src="<%=LwCommon.QRCODE_HTTP %>/${examCardEntity.batchId }/X/${examCardEntity.resourceId }.png">
			</div>
		</div>
	</div>
</body>
</html>

網上查看還有其他的高級功能。設置打印的紙張，設置默認打印機等，本項目我沒有去研究了。

Web項目小票打印分頁打印

簡單例子:

頁面選擇打印標籤:

elk3

Python 將PDF轉爲PDF/A、PDF/X，以及PDF/A轉回PDF

號稱能打敗MLP的KAN到底行不行？數學核心原理全面解析

同事使用 insert into select 遷移數據，開開心心上線，上線後被公司開除！

DeepFilterNet復現

（十三）、ZooKeeper 選主流程

JavaScript分享新浪微博、QQ空間、騰訊微博

強勢團隊的五大特性

Jenkins部署新項目

圖片延遲加載

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結