浏览器打印--类似快递拆包多个单号打印

最新推荐文章于 2024-07-25 09:24:40 发布

Mathilda91

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量281

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b67fe8c51882531283376b6

版权

需求

原始需求是需要打印运单号（也就是贴在快递上那个标签），如果拆分为五份，就需要同时打印五张。生成标签很容易，重点是找到分页符。下面会讲到，其实就是一个css样式(page-break-before:always)。

效果图

效果图如上所示

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap 实例 - 标签页（Tab）插件</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style type="text/css">
			.mt-40 {
				margin-top: 40px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="form-horizontal mt-40">
				<div class="form-group">
					<label class="col-sm-2 control-label">运单号</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" id="order" placeholder="请输入运单号">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">件数</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" id="count" placeholder="请输入件数">
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button class="btn btn-success" id="multiPrintLabel">打印</button>
						<button class="btn btn-default">取消</button>
					</div>
				</div>

				<div id="singleExpress"></div>
			</div>
		</div>
		<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
		<script type="text/javascript" src="jqprint.js"></script>

		<script type="text/javascript">
			$("#multiPrintLabel").click(function() {
				var orderNo, singleHtml = '',
					count;
				orderNo = $("#order").val()
				count = $("#count").val()
				$('#singleExpress').html("")
				for (var i = 0; i < count; i++) {
					singleHtml += `<div class="col-sm-8" style="padding: 20px 0;">
								<div class="row" style="text-align:center;font-size: 21px;margin-bottom:20px;">
									<label><span>运单号：</span></label>
									<span>${orderNo}</span>
								</div>
								<div class="row" style="text-align:center;font-size: 21px;margin-bottom:20px;">
									<div class="form-group col-sm-4"></div>
									<div class="form-group col-sm-4" style="text-align:center;maring-left:50px;">${i+1}/${count}</div>
								</div>
								<div class="row" style="text-align:center;margin-bottom:20px;">
									<img style="width:173px;height:63px;" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1533542106&di=ede2f2d87993d798c70c9bb7447083c6&src=http://pic.58pic.com/58pic/12/19/59/01I58PICsR8.jpg" alt="联昊通" />
								</div>
								<div class="row" style="text-align:center;font-size: 14px;margin-bottom:20px;">
									<div class="col-sm-12" style="text-align:center;">Tel: +852 2785 7778 / +852 2785 6678</div>
									<div class="col-sm-12" style="text-align:center;">Web: www.lht-express.com</div>
								</div>
							</div>`
					if (i != count - 1) {
						singleHtml = singleHtml + `<div style="page-break-before:always;"><br /></div>`;
					}
				}

				$("#singleExpress").append(singleHtml);
				$("#singleExpress").jqprint();
			})
		</script>
	</body>
</html>

复制代码

Mathilda91

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浏览器打印--类似快递拆包多个单号打印

需求原始需求是需要打印运单号（也就是贴在快递上那个标签），如果拆分为五份，就需要同时打印五张。生成标签很容易，重点是找到分页符。下面会讲到，其实就是一个css样式(page-break-before:always)。效果图效果图如上所示代码展示&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="ut...
复制链接

扫一扫