2022年11月6日 星期日

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

沒有留言:

張貼留言