話不多說，先上效果圖
由於業務需求，需要在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最閃亮的牛仔是非得失褲 【紅色 XL】 × 5
</div>
<div class="gooditem">
2020最閃亮的牛仔是非得失褲 【紅色 XL】 × 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//設置條形碼周圍的空白邊距