js实现打印快递单

最新推荐文章于 2021-05-12 17:06:43 发布

cypersonal

最新推荐文章于 2021-05-12 17:06:43 发布

阅读量2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/cypersonal/article/details/105990999

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

话不多说，先上效果图
在这里插入图片描述
由于业务需求，需要在cts系统中直接打印订单。

环境：Xprinter XP-450B的热敏打印机(USB连接电脑)
纸张：75mm * 130mm
打印方式：最基础的window.print。
需要引入： JQuery.min.js 、dayin.css和 JsBarcode.all.js(生成条形码)

前端html代码

<button onclick="doPrint1()">打印</button>
<button onclick="doPrint3()">设置条形码</button>
<div class="hidden"><!-- 隐藏打印区域，避免用户看到 -->
<!--startprint-->
	<div style="padding: 0 10px;height: 97vh;">
		<div class="head">
			<div class="head_l" id="printdate">2020/05/06 17:32:32</div>
			<div class="head_r"><b>快递<br/>包裹</b></div>
		</div>
		<div class="tiaoxingma">
			<!-- <img id="bigcode"/> -->
			<svg id="bigcode"></svg> 
		</div>
		<div class="shengnei">
			600-087-09 000
		</div>
		<div class="shengnei2">
			<img src="/img/ji.png"/><p id="shengfenval">省内件</p>
		</div>
		<div class="shou">
			<div class="shou_left">
				<div>
					<img src="/img/shoujian.png"/>
				</div>
				<div >
					<p id="receiveman"><span style="margin-left: 10px;" id="receivephone">15638511039</span></p>
					<p id="receiveaddress">广东省广州市花都区炭步镇兴华路4号欧雅龙装饰材料有限公司科耐特墙板</p>
				</div>
			</div>
			<div class="shou_right">
				<div class="shou_right_d1"></div>
				<div class="shou_right_d2"></div>
				<div class="shou_right_d2"></div>
			</div>
		</div>
		<div class="ji">
			<div class="shou_left">
				<div>
					<img src="/img/jijian.png"/>
				</div>
				<div >
					<p>陈生<span style="margin-left: 10px;">15638511039</span></p>
					<p>广东省深圳市宝安区西乡街道广兴源互联网产业基地a区</p>
				</div>
			</div>
			<div class="shou_right">
			</div>
		</div>
		<div style="display: flex;border-bottom: 1px solid black;height: 50px;">
			<div style="width: 28%;border-right: 1px solid black;font-size: 23px;font-weight:500;line-height: 30px;">087-09</div>
			<div class="tiaoxingma-sm"><img id="smcode"></div>
		</div>
		<div id="goodslist">
			<div class="gooditem">
				2020最闪亮的牛仔是非得失裤&nbsp;&nbsp;&nbsp;【红色 XL】&nbsp;&nbsp;&nbsp;×&nbsp;5
			</div>
			<div class="gooditem">
				2020最闪亮的牛仔是非得失裤&nbsp;&nbsp;&nbsp;【红色 XL】&nbsp;&nbsp;&nbsp;×&nbsp;5
			</div>
		</div>
	</div>
<!--endprint-->
</div>

JS代码注：打印时我设置了body的60%缩放，在doc.write()中设置，太大的话快递小单无法打印

打印
function doPrint1() {
   var bdhtml=window.document.body.innerHTML;   
    var sprnstr="<!--startprint-->";   
   	var  eprnstr="<!--endprint-->";   
    var prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);   
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));   
    var iframe = document.createElement('IFRAME');
    iframe.setAttribute('style', 'display:none;');
    var doc = null;
    document.body.appendChild(iframe);
    doc = iframe.contentWindow.document;
    doc.write('<html><head><link rel="stylesheet" href="/css/dayin.css?ts=20200507" media="all"></head><body style="zoom: 60%;">'+prnhtml+'</body></html>');
    doc.close();
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    if (navigator.userAgent.indexOf("MSIE") > 0)
    {
    document.body.removeChild(iframe);
    }
}
//设置条形码
function  addBarcode(){
	JsBarcode("#bigcode",data.expressno,{
		width:2,//设置条之间的宽度
		height:30,//高度
		fontSize:12,
		margin:4
	});
	JsBarcode("#smcode",data.expressno,{
		width:2,//设置条之间的宽度
		height:25,//高度
		fontSize:13,
		margin:4
	});
}

css样式注：css文件存放位置与doc.write('<html><head><link rel="stylesheet" href="/css/dayin.css?ts=20200507" media="all"></head>1'+prnhtml+'</body></html>');中的link href相对照，否则会丢失样式

.head{
	text-align: right;
	border-bottom: 1px solid black;
	position: relative;
}
.head_l{
	position: absolute;
	bottom: 0px;
	left: 0px;
	font-size: 12px;
}
.head_r{
	margin-right: 10px;
}
.top{
	height: 62%;
	border-bottom: 3px solid black;
}
.bottom{
	height: 38%;
}
.tiaoxingma{
	text-align: center;
	height:100px;
}
.tiaoxingma svg{
	width: 100%;
	height: 99%;
}
.tiaoxingma-sm{
	width: 78%;
}
.tiaoxingma-sm img{
	width: 100%;
	height: 99%;
}
.shengnei{
	border-top: 1px solid black;
	height: 30px;
	font-size: 23px;
	text-align: center;
	font-weight: 500;
}
.shengnei2{
	border-top: 1px solid black;
    height: 20px;
    font-size: 15px;
    line-height: 20px;
    display: flex;
    font-weight: 400;
}
.shengnei2 img{
	width: 20px;
	height: 20px;
}
.shou{
	display: flex;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	height: 40%;
	/*min-height: 18%;*/
	font-size: 25px;
}
.ji{
	display: flex;
	border-bottom: 1px solid black;
	min-height: 8%;
	font-size: 12px;
}
.shou_left{
	border-right: 1px solid black;
	width: 75%;
	display: flex;
}
.shou_left img{
	width: 20px;
	height: 20px;
	margin-top: 5px;
	margin-right: 5px;
}
.shou_left div{
	/*position: absolute;
    bottom: 50%;
    margin-bottom: -9px;
    left: 45%;*/
}
.shou_right{
	width: 25%;
	font-size: 12px;
	height: 100%;
}
.shou_right_d1{
	height: 60%;
}
.shou_right_d2{
	border-top: 1px solid black;
	height: 20%;
}
p{
	margin: 0;
	padding: 0;
}
.jiancheng{
	width: 60%;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}
.guige{
	width: 20%;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
}
.shuliang{
	width: 20%;
	border-bottom: 1px solid black;
}
.gooditem{
	font-size: 10px;
	width: 100%;
	border-bottom: 1px dashed black;
	padding-bottom: 5px;
}

备注：生成条形码时样式

format: "CODE39",//选择要使用的条形码类型
width:3,//设置条之间的宽度
height:100,//高度
displayValue:true,//是否在条形码下方显示文字
text:"456",//覆盖显示的文本
fontOptions:"bold italic",//使文字加粗体或变斜体
font:"fantasy",//设置文本的字体
textAlign:"left",//设置文本的水平对齐方式
textPosition:"top",//设置文本的垂直位置
textMargin:5,//设置条形码和文本之间的间距
fontSize:15,//设置文本的大小
background:"#eee",//设置条形码的背景
lineColor:"#2196f3",//设置条和文本的颜色。
margin:15//设置条形码周围的空白边距

cypersonal

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
js实现打印快递单

话不多说，先上效果图由于业务需求，需要在cts系统中直接打印订单。环境：Xprinter XP-450B的热敏打印机(USB连接电脑)纸张：75mm * 130mm打印方式：最基础的window.print。需要引入： JQuery.min.js 、dayin.css和 JsBarcode.all.js(生成条形码)前端html代码<button onclick="doP...
复制链接

扫一扫

专栏目录