js barcode 打印

时间:2023-03-10 07:14:25
js barcode 打印

新建 html

 <!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<!-- <link href="printStyle.css" rel="stylesheet"type="text/css" media="print"> 打印才生效 -->
<link rel="stylesheet" href="./printStyle.css">
<script src="JsBarcode.all.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head> <body>
<!-- style="display:none" -->
<div>
<table>
<tr>
<td width="">
<span>条码号:</span><br><a>Box Num</a>
</td>
<td colspan="" >
<img width='' height='' id='barcode'/>
</td>
</tr> <tr>
<td>
<sapn>品名:</sapn>
<br/>
<a>Name </a>
</td>
<td colspan="" width="">
<a>this is barcode</a>
</td>
</tr>
<tr>
<td>
<sapn>物料数量:</sapn>
<br/>
<a>Item Num</a>
</td>
<td style="width: 55px"></td>
<td>
<sapn>日期</sapn>
<br/>
<a>Date</a>
</td>
<td>
<a>//</a>
</td>
</tr>
</table> </div>
</body>
<script>
JsBarcode("#barcode", 'W201901100096', {format: "code128", displayValue: true, fontSize: ,});
</script> </html>

printStyle.css

 *{
margin: ;
padding: ;
}
a{
text-decoration: none;
font-size: 10px;
zoom: 0.8;
line-height: 10px;
} table{
padding-left: 10px;
border-collapse: separate;
border-spacing: 0px 0px; /* 水平间距 垂直间距 */ }
table tbody tr td{
padding: ;
margin: ;
font-size: 10px;
font-weight: bold;
}
span{
font-size: 12px;
line-height: 12px;
}

最后 效果

js barcode 打印

div  + style='page-break-after: always;

按div来分页打印