WebDesign 心得綜整: V60202Q -[列印標籤] –一維條碼 - barcode - JsBarcode.all.min.js

目的: V60202Q -[列印標籤] –一維條碼 - barcode

處理說明: 1>先建立好 HTML - 包含 id= JSBarCode_MATNR_1 的<svg> </svg>

</svg >

</td >

2>利用 Barcode 函式 of JsBarcode.all.min.js , 產生 <svg>一維條碼內容至指定id元件

JsBarcode("#BarCode_MATNR_1", Tmp_MATNR, barcode_settings);

--> 找到 id=BarCode_MATNR_1 元件 , 並產生 Tmp_MATNR 的一維條碼

barcode_settings : 設定一維條碼的格式(CODE39,CODE128)

3><svg> 的內容 : 四方形*n

1>*.js

function V60202Q_PRN() {

//取得[工號].工單件號(AMM_SRO.PN)

var Tmp_SAPNO = Ext.getCmp("sub_SAPNO").getValue();

var Tmp_PN = ""; //工單件號

var np = {};

np["SAPNO"] = Tmp_SAPNO;

var Tmp_url = '../../api/V60202QAPI/get_SAPNO2PN';

var Tmp_PN = getUrlStr(Tmp_url, np, "取得[工號].工單件號(AMM_SRO.PN)");

//1>目前挑選資料

//var pub_print_area_Str0 = "<div id='div_print_area' style='border: 5px solid green;'>";

var pub_print_area_Str1 = "";

var Tmp_uni = "0";

var Tmp_PageCnt = Ext.getCmp("sub_Grid").store.getCount();

var Tmp_MATNR = "", Tmp_WH = "", Tmp_SP = "";

var Tmp_ASN = Ext.getCmp("sub_USED_ASN").getValue();

var Tmp_TMNO = Ext.getCmp("sub_USED_TMNO").getValue();

var Tmp_COMPER = Ext.getCmp("sub_COMPER").getValue();

var Tmp_COMPER_ = Ext.getCmp("sub_COMPER_").getValue();

var Tmp_NAME = "";

var Tmp_USED_QTY = "";

var Tmp_UNIT = "";

try {

/* { name: "MATNR" }, { name: "WH" }, { name: "SP" },

{ name: "NAME" }, { name: "SQTY" }, { name: "USED_QTY" },

{ name: "UNIT" }, { name: "CLASS" }, { name: "CLASS_" }, */

for (var i = 0; i < Tmp_PageCnt; i++) {

Tmp_uni = (i + 1).toString();

cur_rec = Ext.getCmp("sub_Grid").store.getAt(i).data;

Tmp_MATNR = nulltoStr(cur_rec['MATNR']).toString();

Tmp_WH = nulltoStr(cur_rec['WH']).toString();

Tmp_SP = nulltoStr(cur_rec['SP']).toString();

Tmp_NAME = nulltoStr(cur_rec['NAME']).toString();

Tmp_USED_QTY = nulltoStr(cur_rec['USED_QTY']).toString();

Tmp_UNIT = nulltoStr(cur_rec['UNIT']).toString();

Tmp_barcode_text = Tmp_MATNR;

//預覽列印的 HTML 內容

pub_print_area_Str1 = pub_print_area_Str1

//+"<div id='div_print_area' style='width:10cm;height:4cm;border: 1px solid green;'> "

//my_div_x - 包佲 my_tbl_1 + my_break

+ "<div id = 'div_data_" + Tmp_uni + "' style = 'width:10cm;height:3.8cm;border:1px solid black;font-size:8pt;' > "

//+ "<table id='tbl_" + Tmp_uni + "' style='width: 100%;height: 100%;' border=1 bordercolor = 'black' cellspacing = 0 > "

//+ " <tr> "

+ " <table id='tbl_" + Tmp_uni + "1' style='width:100%;height: 15%;' border=1px solid black;' cellspacing=0> "

+ " <tr> "

+ "<td>機號:" + Tmp_ASN + "</td>";

if (!checkisnull(Tmp_SAPNO)) {

pub_print_area_Str1 = pub_print_area_Str1

+ "<td>工號:" + Tmp_SAPNO + "</td>"

+ "<td>工單件號:" + Tmp_PN + "</td>";

}

else {

pub_print_area_Str1 = pub_print_area_Str1

+ "<td>參考文件編號:" + Tmp_TMNO + "</td>";

}

pub_print_area_Str1 = pub_print_area_Str1

+ "</tr>"

+"</table >  "

+ "<table id='tbl_" + Tmp_uni + "2' style='width:100%;height: 85%;' border=1px solid black;' cellspacing=0> "

+"<tr> "

+"<td colspan='2'>領用件號:"+Tmp_MATNR+"</td>"

+"</tr>"

+"<tr>"

+ "<td colspan='2'>"

+ "<svg id='JSBarCode_MATNR_"+Tmp_uni+"' width=50 height = 15 >"

+ "</svg >"

+"</td > "

+"</tr>"

+"<tr>"

+"<td style='width:50%;'>領料數量:"+Tmp_USED_QTY+"</td>"

+"<td style='width:50%;'>單位:"+Tmp_UNIT+"</td>"

+"</tr>"

+"<tr>"

+"<td colspan='2'>名稱:"+Tmp_NAME+"</td>"

+"</tr>"

+"<tr>"

+"<td style='width:50%;'>庫房:"+Tmp_WH+"</td>"

+"<td style='width:50%;'>儲位:"+Tmp_SP+"</td>"

+"</tr>"

+"<tr>"

+ "<td style='width:50%;'>領料人員:" + Tmp_COMPER +" "+Tmp_COMPER_+"</td>"

+"<td style='width:50%;'>"+cnow()+"</td>"

+"</tr>"

+ "</table > "

//+"</tr>"

//+ " </table> "

+ " <div class='display' style='break-after:page'> "

+ " </div> "

+ "</div>  ";

} // end of for for (var i = 0; i < Tmp_PageCnt; i++) {

pub_print_area_Str1 = "<div id='div_print_area' style='border: 1px solid black;'>"

+ pub_print_area_Str1

+ " </div > ";

$("#div_print_area").remove();

var Tmp_sub_panel4 = $('#sub_panel4');

Tmp_sub_panel4.append(pub_print_area_Str1);

//填寫一維 barcode 值

//測 JSBarcode 是否正常 , 填寫 BarCode 圖形

//console.log(JsBarcode);

//console.log(JsBarcode("#JSBarCode_MATNR_1", "123456789", {

// format: "CODE128"

//}));

for (var i = 0; i < Tmp_PageCnt; i++) {

//取得目前所選資燉

cur_rec = Ext.getCmp("sub_Grid").store.getAt(i).data;

Tmp_uni = (i + 1).toString();

Tmp_MATNR = cur_rec.MATNR;

//列印條碼

//Q20170922001 width: 0.8 height: 20

//LMAERO - 73428 - 0001 width: 1 height: 20

var barcode_settings = {

width: 0.8, // Q20170922001

height: 20,

displayValue: true,

fontSize: 10,

textAlign: 'left',

margin: 0,

marginLeft: 3,

//marginBottom: 5,

font: "Arial",

format: "CODE128",

};

var Tmp_barcode_id = "";

if (!checkisnull(Tmp_MATNR)) {

barcode_settings.height = 17;

barcode_settings.displayValue = false;

Tmp_barcode_id = "#JSBarCode_MATNR_" + Tmp_uni;

//JsBarcode("#BarCode_APNO_1", Tmp_APNO, barcode_settings);

JsBarcode(Tmp_barcode_id, Tmp_MATNR, barcode_settings);

}

} // end of for (i=0 ;i<cbxArr.lenght; i++)

var Tmp_prn_div_Str = "#div_print_area";

var Tmp_prn_div_obj = $(Tmp_prn_div_Str);

console.log("Tmp_prn_div_obj:", Tmp_prn_div_obj);

//printThis - 會開啟預覽列印.html , 原本子畫面.html 已被預覽列印取代, 所以 header 也不同了..

//所以 printThis(loadCSS: ) --> 才是 [預覽列印] 視窗戴入的 *.css

$(Tmp_prn_div_Str).printThis({

//importCSS: false, // import parent page css

// importStyle: false, // import style tags

loadCSS: "../JsFunction/print_V60202Q.css?v=@date", // path to additional css file - use an array [] for multiple

});

} // end of try

catch (e) {

var Tmp_Str = "物料儲位標籤列印失敗!!<br>"

+ "件號(" + Tmp_MATNR + ")<br>"

+ "庫存(" + Tmp_WH + ")<br>"

+ "儲位(" + Tmp_SP + ")<br>"

+ "錯誤訊息:" + e.message;

mywarnalert(Tmp_Str);

} //膠漆料管制標籤-查詢失敗

}// end of function V60202Q_PRN() {

2><svg>內容 - 產生的一維條碼內容

xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0,0)">

</g>

</svg>

2026年10月6日星期二

V60202Q -[列印標籤] –一維條碼 - barcode - JsBarcode.all.min.js - JsBarcode.all.min.js

沒有留言:

張貼留言

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2026年10月6日 星期二

V60202Q -[列印標籤] –一維條碼 - barcode - JsBarcode.all.min.js - JsBarcode.all.min.js

沒有留言:

張貼留言

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2026年10月6日星期二