WebDesign 心得綜整: 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

目的: 預覽資料後列印 - jQuery printThis

處理說明: 1>由 jQuery 取得 printArea 元件

2>利用 jQuery元件的 printThis() 函式, 預覽列印結果

3>jQuery元件和 Ext.getCmp() 元件的不同(兩種函式庫的Object property 定義不同)

1>*.js
var sub_PrnTableFlds = [
{
type: 'panel', bodyStyle: "background-color:transparent;", border: 0, padding: "5",
flex: 100,
//layout: { type: 'vbox', align: 'stretch' },
layout: 'border',
items: [
{ //sub_panel1 : table panel
xtype: 'panel',
id: 'sub_panel1',
//region: 'north',
border: true,
layout: { type: 'hbox', align: 'stretch' },
items: [],
}, //end of panel1
] // end of layout: "vbox", padding: "5", items: [
} //end of sub_PrnTableFlds , items[{
] //end of sub_PrnTableFlds , items[

var win = getMyWindow("PrnTable測試", sub_PrnTableFlds, sub_PrnTableFlds_Btns);

win.setWidth(600);

win.setHeight(400);

win.show();

console.log("step6");

} // end of function LendBtn_click() {

// 標籤列印 - 於 sub_panrl1 建立 Table

function mySub1_OkBtn2_click() {

var Tmp_Str = "<div id='print_area' style = 'border: 1px solid black; width=100%;' >"

+ "<table style = 'border: 1px solid black; width=100%;' id = 'my_tbl' > "

+ "<tr style='border: 1px solid black;'><th>件號<br>(PART NO)</th><td>R=8-84-766-21-1</td></tr>"

+ "<tr><th>EO號碼<br>(EONO)</th><td>GM1381+A15</td></tr>"

+ "</table>"

+"</div>";

//var Tmp_tbl = Ext.getCmp("my_tbl");

var Tmp_tbl = $("#my_tbl");

if (!checkisnull(Tmp_tbl)) {

console.log("Tmp_tbl is captched");

console.log("Tmp_tbl.style:",Tmp_tbl.style);

Tmp_tbl.style = "{border: 2px solid red;}";

}

else

console.log("Tmp_tbl is null");

//var Tmp_area = Ext.getCmp("print_area");

var Tmp_area = $("#print_area");

if (!checkisnull(Tmp_area)) {

console.log("Tmp_area is captched");

console.log("Tmp_area.style:", Tmp_area.style);

Tmp_area.style = "{border: 2px solid red;}";

}

else

console.log("Tmp_area is null");

var Tmp_sub_panel1 = $('#sub_panel1');

//var Tmp_sub_panel1 = Ext.getCmp('sub_panel1');

if (!checkisnull(Tmp_sub_panel1)) {

console.log("Tmp_sub_panel1 is not null");

console.log("Tmp_sub_panel1", Tmp_sub_panel1);

}

Tmp_sub_panel1.append(Tmp_Str);

//Tmp_area.printThis({});

$('#print_area').printThis({ });

//$('#sub_panel1').remove();

}

2>Ext.getCmp("sub_panel1") 取得的元件,並沒有 append(), appendTo(), printThis() 函式

只有 $("#sub_panel1"); jQuery取得的元件才有 append(), appendTo(), printThis()函式

--> 即 jQuery $("#sub_panel1") 和 Ext.getCmp("sub_panel1") 取得的 Object 定義不同

2022年11月6日星期日

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

2022年11月2日星期三

jQuery - printThis - jQuery元件 vs Ext.getCmp 元件的比較 - $("#sub_panel" )取得的元件,才可append

WebDesign 心得綜整

追蹤者

網誌存檔

關於我自己

2022年11月6日 星期日