Web项目小票打印分页打印

最新推荐文章于 2024-05-09 13:33:02 发布
最新推荐文章于 2024-05-09 13:33:02 发布
阅读量2.8k 收藏 10
点赞数 2
分类专栏： 前端技术 文章标签： 打印 JS打印 Web打印 打印小票 Jquery打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyuehu/article/details/83308134
版权

      项目需要在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>

网上查看还有其他的高级功能。设置打印的纸张，设置默认打印机等，本项目我没有去研究了。

老虎_tiger
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js无对话框直接打印
zhuoyan_1990的博客
07-15 3317
准备：百度搜索jcpfree，进入官网下载(http://printfree.jatools.com/) 1，客户端安装jcpfree的应用程序（jcpfree\setup.exe） 2，服务器引入jcpfree的js文件（jcpfree\demo\jcpfree.js） 3，服务器页面上写js方法调用jcp.print(myDoc, false) 代码示例： function doPrint()...
web打印POS小票机代码
11-09
在IT行业中，Web打印是一个重要的领域，特别是在零售和餐饮业，POS（Point of Sale）小票机的打印功能是不可或缺的。"web打印POS小票机代码"这个主题聚焦于如何利用Web技术来实现POS小票的无痛打印，而无需支付高昂...
解决vue-print-nb每次打印都会多出一张空白页
qq_42544091的博客
08-05 3687
解决vue-print-nb每次打印都会多出一张空白页
前端实现调用打印机和小票打印(TSPL )功能
三季雨
11-02 5850
前端 的方式 点击这个按钮，直接让打印机打印我想要的东西。
vue+lodop实现web端打印标签功能
最新发布
chensi_07的博客
05-09 1031
Lodop免费WEB打印控件官网,提1 把官方提供的LodopFuncs.js文件保存到某个目录下， 如myProject\src\assets\LodopFuncs.js。3 在打印事件处理函数所在文件里 import 该 module在打印事件函数中调用getLodop获取LODOP对象变量，按照官方教程书写自己的打印函数，通过 print、preview、print_design进行输出。Lodop打印控件、WEB打印、C-Lodop、CLodop、lodop控件、云打印、手机打印、免费、AO打印。
javaScript、PHP连接外卖小票机打印机方案（调用佳博、芯烨等）
web打印
06-26 2426
前言： 目前开发需要用到电脑直接连接外卖小票机打印小票，查阅各种资料，使用 HttpPrinter 终于解决了这个问题。 效果： PHP、JavaScript直接连接小票机并且自动出票。 支持的小票机： 目前测试可以的有：电脑A4打印机、佳博GP58MBIII（USB直连）、芯烨xp-58IIL（usb）。原则上可以支持所有USB连接的小票机，目前模板是按58MM设置的。 //打印Pos小票 begin function prin...
网页js通过webSocket与c#应用程序通讯实现本地打印小票功能。
weixin_40340362的博客
05-05 4240
效果展示： 需求描述： 具体实现 源码下载
Socket蓝牙小票打印
09-14
Socket蓝牙小票打印技术是移动设备与外接打印机进行通信的一种常见方式，尤其在餐饮、零售、物流等行业的手持设备中应用广泛。本篇将详细阐述Socket蓝牙小票打印的相关知识点，帮助读者深入理解其原理及实现过程。 ...
小票打印模板生成DragControl
05-07
小票打印模板生成DragControl是针对商业零售领域中常见的需求——高效、准确地设计和打印小票而开发的一款工具。该工具特别强调了用户友好性和灵活性，通过DragControl技术，使得用户可以方便地通过拖拽操作来设计...
php飞蛾云打印，小票打印
11-25
小票打印是零售、餐饮、物流等行业不可或缺的一部分，它涉及到收银、订单确认、发货单据等业务流程。传统的打印方式通常需要本地打印机驱动，但随着云计算的发展，云打印服务应运而生，如“飞蛾云打印”。这种服务...
winform小票打印工具
10-15
在给定的“winform小票打印工具”项目中，我们聚焦于利用C#语言和Winform来实现一个专门用于打印小票的工具。这个工具的独特之处在于它使用XML配置文件来定义和自定义打印格式，这为用户提供了极大的灵活性和可扩展...
通过Web打印超市一样的小票
04-21
通过Web打印超市一样的小票。测试可以使用。。。
简单打印-80小票示例模板
12-18
简单打印-80小票示例模板 安装程序 放入模板到安装目录/Templates 即可使用 精确打印,web打印利器, 金额自动计算!排版优化, 根据需要修改!
小票打印软件
07-26
小票打印机软件小票打印机软件小票打印机软件小票打印机软件小票打印机软件
191.Vue.js智能扫码点餐系统（二十五）【调用API接口实现提交订单自动云打印小票功能】2019.03.26
youyouwuxin1234的博客
03-31 1948
0、知识点 打印小票 打印机注册、打印机用户管理 第三方开发平台需要注册打印机的账户才可以使用 1、WIFI 自动接单云打印机介绍 飞鹅多平台 GPRS 全自动接单美团外卖饿了么百度 WIFI 正品云打印机 2、使用方法 链接电源 装纸 配置打印机 wifi 链接密码（只需要第一次配置） 关注设备上面的二维码配置设备，测试打印，配置外卖订单 WiFi 版本打印机使用安...
PHP\Java\C#\Js\Go\Python调用小票打印机打印订单实现
u010520850的博客
09-27 2692
中午打印机Z1是安徽中午科技有限公司推出的一款WIFI/GPRS联网的打印机。注意这是一款热敏58mm小票打印机，就是大家购物，外卖那样的收银小票。 在原来的小票打印机世界里，通常都是U口和蓝牙,更高级一点就是ip打印机，就是那种局域网打印机，这些打印机只能在一定范围内使用，蓝牙打印机需要配合app使用，USB打印机需要连接电脑使用，ip打印机也需要客户端配合使用，中午打印机可以支持远程打印，不...
资江小票打印机js实现web打印（web通用打印）
Speechless_的博客
09-04 7387
参数 默认值 接收值 描述 globalStyles true Boolean 是否包含父文档的样式 mediaPrint false Boolean 是否包含media='print'的链接标签。会被globalStyles选项覆盖 stylesheet null URL-string 外部样式表的URL地址 noPrintSelector ".no-print" 任何可用的jQuery选择器 不想打印的元素的jQuery选择器 iframe 默认true，如果没有iframe选择器被
一种基于浏览器的自动小票机打印实现方案
weixin_34038293的博客
07-26 234
1、使用场景 用户在浏览器做了某项操作后，自动打印小票。 2、测试方式 2.1 JavaScript实现 尝试了很多办法，最终都会出现一个弹出框，让用户选择打印机。不符合我们需求。 2.2lodop 功能比较强大，但是收费的。暂不考虑。 2.3 PAZU 功能也...
Web使用热敏打印小票(IE环境)
寒冰屋的专栏
09-23 914
概述 在html页下使用Epson P60II 热敏纸下打印小票，使用的打印方案为调用window.print()。 代码实现 1、定义窗体，设置宽度和高度 2、使用ActiveXObject，创建 Scripting.FileSystemObject​​​​​​​ function print_onclick() { var objfs = new ActiveXObject("Scripting.FileSystemObject"); var objprinter=objfs.C..
vue项目如何 打印小票
05-11
在 Vue 项目中打印小票可以通过以下步骤实现： 1. 安装打印插件：可以使用插件比如`print-js`或`vue-html-to-paper`等来实现打印功能。 2. 引入打印插件：在需要打印小票的组件中引入打印插件。 3. 编写小票模板...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值