目的: 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>"
"<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>"
;
+"<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; }
}
{ 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
沒有留言:
張貼留言