目的: V120502- 標籤列印 & 二維條碼列印(V120502B)
處理說明: 1> 如下以 <div> & <table> 畫出標籤內容
<div id= my_div1>
<table id= my_tbl1 >
<div id=my_barcode1>
<div id= break_page1>
2>預覽列印 $('#my_div1,#my_barcode1,#break_page1,#my_div2,#break_page2,#my_div3').printThis({});
0>印表機設定:
標籤樣式: USER: 100mm*60mm
襯紙寬度: 左: 2mm 右: 2mm
方冋: 直向
1>標籤列印 :
2>二維條碼列印
3>列印方向:橫向/直向 - print.css
/* size: portrait; //* 直向
size: landscape; //* 橫向
size: A4; //* 紙張大小
size: A4 portrait; //* 混合使用
margin: 0; //* 邊界與內容的距離
*/
@media print {
@page {
size: portrait;
}
}
1>*.js - V120502B.js
//預覽列印
function mySub1_OkBtn2_click() {
//組合 print_div
//取得是否列印日期
var cur_rec, Tmp_AMMNO, Tmp_CHECK, Tmp_SAPNO, Tmp_PN, Tmp_QTY, Tmp_EOCND, Tmp_RMK, Tmp_DT;
var Tmp_sub_DT = Ext.getCmp('sub_DT').getValue();
console.log("Tmp_sub_DT:", Tmp_sub_DT);
if (Tmp_sub_DT == true)
Tmp_DT = "";
else
Tmp_DT = DatetoStr(now, "Y/m/d");
//取得 sub_store;
var Tmp_sub_Grid = Ext.getCmp('sub_Grid');
var Tmp_sub_store = Tmp_sub_Grid.store; //= gridstore
var Tmp_PageCnt = Tmp_sub_store.getCount();
if (Tmp_PageCnt == 0) {
var Tmp_Str = "請先選擇要列印的資料!!"
mywarnalert(Tmp_Str);
return;
}
var Tmp_uni = "0";
var Tmp_barcode_text = "";
var pub_print_area_Str1 = "<div id='print_area' style='border: 5px solid green;'>";
//my_div1
for (i = 0; i < Tmp_PageCnt; i++) {
//console.log("更新第 i 筆", i);
//依目前 store的資料, 更新 AMM_FACDEPD.NWK , PK( DT+DEP+EMPLYID)
cur_rec = Tmp_sub_store.getAt(i);
Tmp_AMMNO = cur_rec.data["AMMNO"];
Tmp_CHECK = cur_rec.data["CHECK"];
Tmp_SAPNO = cur_rec.data["SAPNO"];
if (checkisnull(Tmp_SAPNO))
Tmp_SAPNO = "";
Tmp_PN = cur_rec.data["PN"];
Tmp_QTY = cur_rec.data["QTY"];
Tmp_EOCND = cur_rec.data["EOCND"];
Tmp_RMK = cur_rec.data["RMK"];
if (checkisnull(Tmp_RMK))
Tmp_RMK = "";
Tmp_uni = (i + 1).toString();
//barcode 文字=件號&ECNO&日期&數量&工號&備註(機號)
Tmp_barcode_text = Tmp_PN + "&"
+ Tmp_EOCND + "&"
+ Tmp_DT + "&"
+ Tmp_QTY + "&"
+ Tmp_SAPNO + "&"
+ Tmp_RMK;
pub_print_area_Str1 = pub_print_area_Str1
+ "<div style='width: 6cm; height: 7cm;border: 1 px solid yellow;' id='my_div" + Tmp_uni + "'>"
+ "<table id = 'my_tbl" + Tmp_uni + "' style='width: 95%; height: 5cm; font-size: 10pt;
margin-top: 5pt;margin-left: 5pt; border-collapse:collapse;' border=1px borderstyle='solid' bordercolor='black' > "
+ "<tr ><th width=30% style='transform: scale(0.7);'>件號<br>(PART NO)</th>
<td width=70%>" + Tmp_PN + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>EO號碼<br>(EONO)</th><td width=70%>" + Tmp_EOCND + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>日期<br>(DATE)</th><td width=70%>" + Tmp_DT + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>數量<br>(QTY)</th><td width=70%>" + Tmp_QTY + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>工令單號<br>(SOR NO)</th><td width=70%>" + Tmp_SAPNO + "</td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>品保<br>(QC)</th><td width=70%></td></tr>"
+ "<tr ><th width=30% style='transform: scale(0.7);'>備註<br>(REMARK)</th><td width=70%>" + Tmp_RMK + "</td></tr>"
+ "</table>"
+ "<table id = 'my_bottom" + Tmp_uni + "' style='width: 100%; line-height: 9pt; font-size: 7pt;border-collapse:collapse;' > "
+ "<tr >"
+ "<th width = 30% style='transform: scale(0.7);' >04/2004<br></th> "
+ "<td width = 70% style='transform: scale(0.7);' align='right' >TAG-DR-006</td>"
+"</tr > "
+ "</table>"
+ "</div>"
+ "<div id='my_div_barcode" + Tmp_uni + "' style='margin-top: 10pt;margin-left: 30pt; font-size: 6pt;' >"
+ genQRcodeStr(Tmp_barcode_text,90,90,false)
+ "</div>" //分頁
+ "<div class='display' id='break_page" + Tmp_uni + "' style='break-after:page'></div>";
}; // for (i = 0; i < Tmp_PageCnt; i++) {
console.log("pub_print_area_Str1:", pub_print_area_Str1);
//將 [預覽列印]的 Table_div String 加入 子視窗.panel
//將上次的列印資料 remove()
$("#print_area").remove();
var Tmp_sub_panel4 = $('#sub_panel4');
console.log("Tmp_sub_panel4:", Tmp_sub_panel4);
Tmp_sub_panel4.append(pub_print_area_Str1);
var Tmp_Str = "<link type='text/css' rel='stylesheet' href='../JsFunction/print.css?v=@date' " + " media='print'>";
$('head').append(Tmp_Str);
console.log("0 $('#sub_panel4').width:", $("#sub_panel4").width());
console.log("0 $('#sub_panel4').heigh:", $("#sub_panel4").height());
//顯示 [二維條碼] 在下方的 panel(sub_panel4)
var Tmp_prn_div_Str = "";
for (i = 0; i < Tmp_PageCnt; i++) {
Tmp_uni = (i + 1).toString();
Tmp_prn_div_Str = Tmp_prn_div_Str + "#my_div" + Tmp_uni;
//新增 [二維條碼] 預覽列印
Tmp_prn_div_Str = Tmp_prn_div_Str + ",#my_div_barcode" + Tmp_uni;
if (i != (Tmp_PageCnt - 1))
Tmp_prn_div_Str = Tmp_prn_div_Str + ",#break_page" + Tmp_uni + ",";
}
//if (Tmp_prn_div_Str.length > 0)
//Tmp_prn_div_Str = Tmp_prn_div_Str + "'";
console.log("Tmp_prn_div_Str:", Tmp_prn_div_Str);
//預覽列印 //$('#my_div1,#break_page2,#my_div2,#break_page3,#my_div3').printThis({
$(Tmp_prn_div_Str).printThis({
importCSS: false, // import parent page css
importStyle: false, // import style tags
loadCSS: "../JsFunction/print.css?v=@date", // path to additional css file - use an array [] for multiple
});
}
2>print.css - 設定列印方向
@page {
size: auto; /* auto is the initial value */
/* margin: 0mm 10mm 0mm 10mm; */ /* this affects the margin in the printer settings 最關鍵參數
margin: 0mm 0mm 0mm 0mm;
/*margin-left: 0mm;*/
}
body {
/*background-color: #FFFFFF;*/
margin: 0mm; /* this affects the margin on the content before sending to printer */
/*padding: 5mm 0 5mm 0;*/
}
/* size: portrait; //* 直向
size: landscape; //* 橫向
size: A4; //* 紙張大小
size: A4 portrait; //* 混合使用
margin: 0; //* 邊界與內容的距離
*/
@media print {
@page {
size: portrait;
}
}
4>印表機設定畫面
