V120502B - 標籤列印 & 二維條碼列印 & 列印方向: 橫向/直向

 目的: 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>印表機設定畫面