目的: V120202B - JSBarcode - 一維條碼 - online HTML測試
font-size: 3pt; --> 1inch=72pt , 1pt=1/72inch
處理說明: 1>利用 online HTML 編輯 ,網址如下:
https://www.tutorialspoint.com/online_html_editor.php
2>引用 barcode 的 js (JsBarcode.code39.min.js)
2>引用 barcode 的 js (JsBarcode.code39.min.js)
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code39.min.js"></script>
3> 產生 barcode
<div><svg id='JSBarCode1'></svg></div>
--> JsBarcode("#JSBarCode_PN", "LAMAERO-73428-0001");
4>設定 barcode 的顯示範圍
var settings = {
width: 0.5,
height: 10,
displayValue: true,
fontSize: 8,
:
};
JsBarcode("#JSBarCode_PN", "LAMAERO-73428-0001",settings);
1>*.HTML
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code39.min.js"></script>
<script language="JavaScript">
function greet() {
alert("Hello!!");
}
var settings = {
width: 0.5,
height: 10,
displayValue: true,
fontSize: 8,
textAlign: 'left',
margin: 1,
marginLeft: 10,
//marginBottom: 5,
font: "新細明體",
//format: "CODE39",
//background: "#00FF00"
};
function genbarcode() {
console.log("genbarcode!!");
JsBarcode("#JSBarCode1", "Q20170922001",settings);
}
function genbarcode_PN() {
console.log("genbarcode_PN!!");
JsBarcode("#JSBarCode_PN", "LAMAERO-73428-0001",settings);
}
</script>
</head>
<body>
<form>
<input type="button" value="Hello" onclick="genbarcode()">
<input type="button" value="PN barcode" onclick="genbarcode_PN()">
</form>
<div><svg id='JSBarCode1'></svg></div>
<div id='print_area' style='width:10cm;height:4cm;border:5px solid green;'>
<div id='my_div_1' style='width: 10cm; height: 4cm;border: 1px solid yellow;font-size:4pt;'>
<table id='my_tbl1' style='width:100%;padding:0 0 0 0;' border=1px borderstyle='solid' bordercolor='blue' cellspacing=0>
<tr>
<td width=35%>機號: A049 </td>
<td width=35% '>工號: 12345678</td>
<td width=35% '>工單件號: SROPN_1 </td>
</tr>
</table>
<table id='my_tbl2' style='width:100%;' border=1px borderstyle='solid' bordercolor='red' cellspacing=0>
<tr style='height: 0.5cm;'>
<td width=50%>申請件號:LAMAERO-73428-0001</td>
<td width=50%>申請件號:LAMAERO-73428-0001</td>
</tr>
<tr style='height:0.5cm;'>
<td width=50%><svg id='JSBarCode_PN' width=50 height=15></svg></td>
<td width=50%><svg id='JSBarCode_MATNR' width=50 height=15></svg></td>
</tr>
<tr>
<td width=50%>名稱:TFE DRY LUBE</td>
<td width=50%>儲位2:防C</td>
</tr>
<tr>
<td width=50%>儲位1:防B</td>
<td width=50%>庫房:23#</td>
</tr>
<tr>
<td width=50%>撥料數量:4</td>
<td width=50%></td>
</tr>
</table>
<table id='my_tbl3' style='width: 100%;' border=1px cellspacing=0 bordercolor=blue>
<tr>
<td width=50%><svg id='JSBarCode_APNO' width=50 height=15></svg></td>
<td width=50%>需求者:612578 楊智為 856
<br>需求地點:A08</td>
</tr>
</table>
</div>
<div class='display' id='break_page1' style='break-after:page'></div>
<svg id="barcode"></svg>
</body>
</html>
