V120502A - jQuery - printThis() - 分頁處理

目的:   jQuery - printThis()  - 預覽列印 - 分頁處理 

處理說明: 0>預覽列印處理:

                       $('#my_div2,#break_page,#my_div1').printThis({

                            //***    inportCSS 設成 false , 才可以分頁   ***//

                            importCSS: false, // import parent page css  

                  1> 分頁處理:
                       "<div class='display' id='break_page' style='break-after:page'></div>"

                  2> 區域長寬設定:

                      "<div  style='width: 8cm; height: 3.5cm;border: 3px solid yellow;' id='my_div1'>"    

                  3> Table的線條設定 - 行高, 字型, 線條

                         "<table  id = 'my_tbl1' style='line-height: 6pt; font-size: 3pt;

                         border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue' > "

                  4>顯示資料的縮放處理 -

                          transform: scale(0.6);

// 列印模式設定 @media print { *****css here***** } 

//列印頁面設定 @page{ ****setting here****}

1>*.js

var pub_print_area_Str1 = "<div  id='print_area'   style='border: 5px solid green;'>"    

    //my_div1
    +"<div  style='width: 8cm; height: 3.5cm;border: 3px solid yellow;' id='my_div1'>"    
    + "<table  id = 'my_tbl1' style='line-height: 6pt; font-size: 3pt;border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue' > "
    + "<tr ><th width=30% style='transform: scale(0.6);'>件號1<br>(PART NO)</th><td width=70%>R=8-84-766-21-1</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>EO號碼<br>(EONO)</th><td width=70%>GM1381+A15</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>日期<br>(DATE)</th><td width=70%>2022/11/03</td></tr>"
    + "<tr ><th width=30% style='transform: scale(0.6);'>數量<br>(QTY)</th><td width=70%>2</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>工令單號<br>(SOR NO)</th><td width=70%>23169622</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>品保<br>(QC)</th><td width=70%></td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>備註<br>(REMARK)</th><td width=70%>A052</td></tr>"
    + "</table>"
    + "</div>"
    //分頁
    //+ "<div class='display' id='break_page' style='page-break-after:always'></div>"
    + "<div class='display' id='break_page' style='break-after:page'></div>"
    //my_div2
    + "<div  style='width: 8cm; height: 3.5cm;border: 3px solid yellow;'  id='my_div2'>"
    + "<table  id = 'my_tbl2' style='line-height: 6pt; font-size: 3pt;border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue' > "
    + "<tr ><th width=30% style='transform: scale(0.6);'>件號2<br>(PART NO)</th><td width=70%>R=8-84-766-21-1</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>EO號碼<br>(EONO)</th><td width=70%>GM1381+A15</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>日期<br>(DATE)</th><td width=70%>2022/11/03</td></tr>"
    + "<tr ><th width=30% style='transform: scale(0.6);'>數量<br>(QTY)</th><td width=70%>2</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>工令單號<br>(SOR NO)</th><td width=70%>23169622</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>品保<br>(QC)</th><td width=70%></td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>備註<br>(REMARK)</th><td width=70%>A052</td></tr>"
    + "</table>"
    + "</div>"
    + "</div>"    
    ;

// [預覽列印]  - 

function sub_PrnTable_OkBtn3_click() {          

    //分頁列印 2 區域    

    $('#my_div2, #break_page, #my_div1').printThis({        

        //***    importCSS 設成 false , 才可以分頁   ***//

        importCSS: false, // import parent page css

        importStyle: false, // import style tags

        printContainer: true, // grab outer container as well as the contents of the selector

        //***    loadCSS 設成 "../JsFunction/print.css" , 第二頁Top 0cm ,   ***//

        //loadCSS: "../JsFunction/print.css", // path to additional css file - use an array [] for multiple        

        //***    loadCSS 設成 "" , 第二頁Top 會有 2cm ,  ***//

        loadCSS: "", // path to additional css file - use an array [] for multiple        

    });    

}

2>@media print   @page

@media print 

{ // 隱藏不要被列印的元素 .NotPrint { display:none; } 

   // 要被列印的元素 .PrintUnit { 

       // 元素前要被分頁 page-break-before:always; 

       // 元素本身不能被分頁 page-break-inside:avoid; }

}

@page

{ size: A4 portrait; //a4尺寸 直式 

   margin: 1cm; //邊距1公分 

   orphans:4; //頁面最後一段段落行數，預設值為2 widows:2; 

   //頁面第一段段落行數，預設值為2 

}

PS @page相關說明網址如下:

https://developer.mozilla.org/en-US/docs/Web/CSS/@page