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
    评论
专栏目录
解决vue-print-nb每次打印都会多出一张空白页
qq_42544091的博客
08-05 3748
解决vue-print-nb每次打印都会多出一张空白页
前端实现调用打印机和小票打印(TSPL )功能
三季雨
11-02 6275
前端 的方式 点击这个按钮，直接让打印机打印我想要的东西。
vue+lodop实现web端打印标签功能
最新发布
chensi_07的博客
05-09 1137
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打印。
js无对话框直接打印
zhuoyan_1990的博客
07-15 3332
准备：百度搜索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()...
js、PHP连接外卖小票机打印机方案（调用佳博、芯烨等）
web打印
08-24 2265
目前开发需要用到电脑直接连接外卖小票机打印小票，查阅各种资料，使用 6612345浏览器 终于解决了这个问题。
前端小票打印、网页打印（uniapp、小程序、ESC/POS指令）
Linxi_001的博客
05-26 8208
前端打印，热敏打印机，小票打印，ESC/POS指令，票据打印，网页打印
简单实用的web打印方案-网页精准打印
anyprinter的博客
10-28 2097
在当前这个互联网时代，大部分企业都搭建了自已的平台，通过平台联系客户，与粉丝互动，展示自己的产品。PC网站、APP、手机站、这些平台是企业互联网生态系统的重要基础。在公司平台化、系统化的今天，工作中出现web打印的情况也会比较多。 以电商公司为例，电商平台是目前互联网重要的交易平台，web打印多为业务场景的打印需求，比如直接打印，无预览直接打印，特定格式打印（打印标签、面单、票据、零售小票等）其难度在于如何将需要打印的内容，精确套打到标签、票据中，精确控制分页，并实现高速连续打印。 ...
web打印POS小票机代码
11-09
在IT行业中，Web打印是一个重要的领域，特别是在零售和餐饮业，POS（Point of Sale）小票机的打印功能是不可或缺的。"web打印POS小票机代码"这个主题聚焦于如何利用Web技术来实现POS小票的无痛打印，而无需支付高昂...
Socket蓝牙小票打印
09-14
Socket蓝牙小票打印技术是移动设备与外接打印机进行通信的一种常见方式，尤其在餐饮、零售、物流等行业的手持设备中应用广泛。本篇将详细阐述Socket蓝牙小票打印的相关知识点，帮助读者深入理解其原理及实现过程。 ...
小票打印模板生成DragControl
05-07
小票打印模板生成DragControl是针对商业零售领域中常见的需求——高效、准确地设计和打印小票而开发的一款工具。该工具特别强调了用户友好性和灵活性，通过DragControl技术，使得用户可以方便地通过拖拽操作来设计...
php飞蛾云打印，小票打印
11-25
小票打印是零售、餐饮、物流等行业不可或缺的一部分，它涉及到收银、订单确认、发货单据等业务流程。传统的打印方式通常需要本地打印机驱动，但随着云计算的发展，云打印服务应运而生，如“飞蛾云打印”。这种服务...
一种基于浏览器的自动小票机打印实现方案(js版)
12-07
1、使用场景 用户在浏览器做了某项操作后，自动打印小票。 2、测试方式 2.1 JavaScript实现 尝试了很多办法，最终都会出现一个弹出框，让用户选择打印机。不符合我们需求。 2.2 lodop 功能比较强大，但是收费的。暂不考虑。 2.3 PAZU 功能也很强大，免费许可。非常赞！ 详情：http://www.4fang.net/article/tech/pazu_tprinter.html 实现过程： 2.3.1 打印详情页面 <!doctype html> <html> <head> <meta charset="utf-8"> <title>小票</tit
JCP 免费版
04-09
atoolsPrinter 是一款实现网页套打的免费工具。该工具的特点是可以直接对web页面进行精确的分页打印，这不仅使“会设计网页就会做网页套打”成为可能，也使项目经理们摆脱了预算紧张的压力。jatoolsPrinter通过在网页中嵌入控件，解决了web客户端精确打印，批量打印，打印配置自动保留等问题。jatoolsPrinter 官方正式免费版，支持ie6+，http://printfree.jatools.com。
winform小票打印工具
10-15
在给定的“winform小票打印工具”项目中，我们聚焦于利用C#语言和Winform来实现一个专门用于打印小票的工具。这个工具的独特之处在于它使用XML配置文件来定义和自定义打印格式，这为用户提供了极大的灵活性和可扩展...
NWJS（NodeJS）调用打印机 - 打印小票
热门推荐
甘蓝的专栏
06-27 1万+
1 背景 架构设计：VueJS + Spring Cloud微服务架构 功能要求： 调用小票打印机打印小票，功能和超市收银结算功能相同 使用NWJS包装VueJS前端代码实现exe安装包和可执行文件 2 调查 经过调查，主要有如下几种思路。 2.1 思路1：使用IP+Port方式调用网络打印机 代码如下，只需要调用node的net模块即可。详情请看参考1。 var net = require('net'); var client = new net.Socket(); var buffer
Web使用热敏打印小票(IE环境)
dotNET跨平台
09-22 1194
概述在html页下使用Epson P60II 热敏纸下打印小票，使用的打印方案为调用window.print()。代码实现1、定义窗体，设置宽度和高度<body onload="wi...
如何通过Nw.js纯前端实现调用热敏打印机打印小票？
weixin_34268169的博客
02-18 5724
1. 需求背景前段时间公司项目需要在商户电脑上调用商户自己的热敏打印机打印商户的客户的购物小票（如下图），但FE的纯js显然不能实现该功能，因此采用nw来实现。当时的项目已有一个web页面，因此在nw里将已有的html页面嵌入了iframe，与nw内实现的打印功能通过postMessage通信。但本篇重点介绍如何打印小票，这些通信以及nw的其他使用就不再占用篇幅了。2. 功能点获取用户打印机列表，...
js连接小票打印机
吕建奎的专栏
05-28 6415
var div = dojo.create("div");             var table = dojo.create("table", {cellpadding: "3", cellspacing: "5", style: "min-width:250px; max-width:300px; font:15px arial,sans-serif;"}, div);       
javaScript、PHP连接外卖小票机打印机方案（调用佳博、芯烨等）
web打印
06-26 2460
前言： 目前开发需要用到电脑直接连接外卖小票机打印小票，查阅各种资料，使用 HttpPrinter 终于解决了这个问题。 效果： PHP、JavaScript直接连接小票机并且自动出票。 支持的小票机： 目前测试可以的有：电脑A4打印机、佳博GP58MBIII（USB直连）、芯烨xp-58IIL（usb）。原则上可以支持所有USB连接的小票机，目前模板是按58MM设置的。 //打印Pos小票 begin function prin...
vue项目如何 打印小票
05-11
在 Vue 项目中打印小票可以通过以下步骤实现： 1. 安装打印插件：可以使用插件比如`print-js`或`vue-html-to-paper`等来实现打印功能。 2. 引入打印插件：在需要打印小票的组件中引入打印插件。 3. 编写小票模板：使用HTML和CSS等技术编写小票模板。 4. 调用打印函数：在组件的方法中调用打印函数，将小票模板传入即可。 下面是一个使用`vue-html-to-paper`插件打印小票的示例代码： 1. 安装插件： ``` npm install vue-html-to-paper --save ``` 2. 在需要打印的组件中引入插件： ```javascript import VueHtmlToPaper from 'vue-html-to-paper'; ``` 3. 定义小票模板： ```html <template id="print-template"> <div class="print"> <h2>{{ title }}</h2> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="index"> <td>{{ item.name }}</td> <td>{{ item.price }}</td> <td>{{ item.quantity }}</td> </tr> </tbody> </table> </div> </template> ``` 4. 注册打印插件： ```javascript export default { name: 'PrintExample', data() { return { title: '小票标题', list: [ { name: '商品1', price: 10, quantity: 2 }, { name: '商品2', price: 20, quantity: 1 }, { name: '商品3', price: 5, quantity: 4 }, ], }; }, methods: { print() { // 等待模板渲染完成再进行打印 this.$nextTick(() => { const options = { name: '_blank', specs: [ 'fullscreen=yes', 'titlebar=yes', 'scrollbars=yes', ], styles: [ '/assets/css/print.css', ], }; // 将模板传入打印函数 this.$htmlToPaper(document.getElementById('print-template'), options); }); }, }, directives: { // 注册打印插件 'html-to-paper': VueHtmlToPaper, }, }; ``` 5. 在页面中调用打印函数： ```html <template> <div> <button @click="print">打印小票</button> <div v-html="printContent"></div> </div> </template> ``` 这样就可以在 Vue 项目中实现打印小票的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值