列印模板
# FastWeb列印模板設計(WEB)
- 適用平臺： WEB(桌面)
提示
列印模板的設計模板界面僅支援簡體中文顯示。預設示例中的列印模板使用簡體中文字符集，在其他語言環境下顯示可能存在亂碼。
FastWeb中引入了簡易列印模板，可在網頁端設計所需的列印格式並匯入數據列印。本文件將帶你瞭解列印模板的內容。如有複雜報表的列印內容，請使用Flying進行表格製作。
# 1. 建立列印模板
在主頁面下，點選左側功能表欄中的[系統管理]-[列印模板]，打開列印模板界面，該界面下展示目前系統中使用的所有列印模板。
點選[新增]按鈕，新增列印模板，在模板名稱處填寫列印模板名稱。列印數據處暫時不用填寫內容，填寫完成後點選[儲存]。
在列印模板表格中選擇剛才建立的模板，點選[設計模板]進入到設計模板界面。
# 2. 設計模板
本小節主要介紹該列印模板設計視窗中使用到的內容。其主要的區域如下圖所示。
①：模板區，其中包含列印模板的元素內容。
②：功能表區，包含頁面設定以及模板操作的內容。
③：頁面區，頁面設計的主要區域。
④：屬性區，元素屬性顯示區，可在該界面中對元素屬性進行修改，屬性表的末尾為[確定]與[刪除]按鈕，分別用作儲存元素屬性與刪除選擇的元素。
# 2.1. 功能表
A3、A4、A5、B3、B4、B5： 固定的頁面尺寸格式，點選可將模板更改為對應的尺寸。
寬/mm： 設定自定義寬時填寫的數值。
高/mm： 設定自定義高時填寫的數值。
自定義： 當在寬與高處填寫數值時，點選該按鈕可設定模板為自定義的寬高。
旋轉： 將頁面的寬與高相互替換。
清空： 將頁面中的元素刪除恢復至空白頁面的狀態。
預覽： 執行預覽，顯示列印頁面的效果。
列印： 呼叫瀏覽器的列印功能，執行頁面列印。
導出PDF： 將列印的頁面輸出為PDF。
儲存模板： 將設計的列印模板數據儲存至對應的列印模板中。
# 2.2. 模板對像
模板對像包括頁面面板以及其中的元素對象。
# 2.2.1. 面板
面板中主要包含以下屬性：
| 名稱 | 型別 | 描述 |
|---|---|---|
| 列印規則(panelPaperRule) | string | 面板列印紙張規則保持奇數(odd):列印紙張保持奇數保持偶數(even):列印紙張保持偶數 |
| 首頁頁尾(firstPaperFooter) | number | 首頁頁尾線位置 |
| 偶數頁頁尾(evenPaperFooter) | number | 偶數頁頁尾線位置 |
| 奇數頁頁尾(oddPaperFooter) | number | 奇數頁頁尾線位置 |
| 尾頁頁尾(lastPaperFooter) | number | 尾頁頁尾線位置 |
| 左偏移(leftOffset) | number | 列印左偏移量,-1將覆蓋面板的左偏移 |
| 頂部偏移(topOffset) | number | 列印頂部偏移量,-1將覆蓋面板的右偏移 |
| 字型(fontFamily) | string | 文字字型，預設為細明體 |
| 紙張方向(僅自定義紙質有效) | string | 設定自定義紙張的方向 |
| 頁碼格式 | string | 設定紙張頁碼的顯示格式 |
# 2.2.2. 文字
普通文字分為3種類型：文字型別、條形碼型別、二維碼型別。
| 名稱 | 型別 | 描述 |
|---|---|---|
| 標題(title) | string | 標題或內容field存在：title為標題，列印結果為 title:datafield不存在：title為內容，列印結果為title |
| 欄位(field) | string | 欄位名稱 |
| 測試數據(testData) | string | 測試數據,列印設計時 作為data,預覽或列印時被真實數據替換 |
| 字型(fontFamily) | string | 文字字型，預設為細明體 |
| 字型大小(fontSize) | number | 字型大小，預設為9pt |
| 字型粗細(fontWeight) | string | 字型粗細 |
| 字間距(letterSpacing) | number | 字間距 |
| 字型顏色(color) | number | 字型顏色 |
| 文字修飾(textDecoration) | string | 文字修飾內容 |
| 左右對齊(horizontalAlign) | string | 設定文字的水平對齊方式 |
| 上下對齊(verticalAlign) | string | 設定文字的垂直對齊方式 |
| 字型行高(lineHeight) | number | 設定行高，預設值為9.75pt |
| 列印型別(textType) | string | 設定文字型別文字(text)，條形碼(barcode)，二維碼(qrcode) ，預設為文字 |
| 條形碼格式(barcodeMode) | string | 設定條形碼的編碼格式 |
| 隱藏顯示標題(hideTitle) | boolean | 隱藏標題，預設為false |
| 顯示規則(showInPage) | string | 顯示規則僅頁首頁尾元素或位置固定固定有效 |
| 隱藏規則(hideInPage) | string | 隱藏規則僅頁首頁尾元素或位置固定固定有效 |
| 位置固定(fixed) | boolean | 位置固定 每頁列印到指定位置 位置固定的元素脫離正常的列印流，讓不在頁首頁尾範圍內的元素擁有每頁輸出的特性。 與面板指定頁頁尾線設定功能 相互協作 可以設定指定頁 不同的頁尾資訊展示。 |
| 拖動方向(axis) | string | 列印設計時拖拽方向 |
| 旋轉角度(transform) | number | 旋轉角度 |
| 左邊框 | string | 設定文字左邊框顯示樣式 |
| 上邊框 | string | 設定文字上邊框顯示樣式 |
| 右邊框 | string | 設定文字右邊框顯示樣式 |
| 下邊框 | string | 設定文字下邊框顯示樣式 |
| 邊框大小 | number | 設定邊框顯示時的預設大小 |
| 邊框顏色 | number | 設定邊框的顏色 |
| 左內邊距 | number | 文字內容與左邊框的距離 |
| 上內邊距 | number | 文字內容與上邊框的距離 |
| 右內邊距 | number | 文字內容與右邊框的距離 |
| 下內邊距 | number | 文字內容與下邊框的距離 |
| 背景顏色 | number | 設定文字的背景顏色 |
# 2.2.3. 圖片
| 名稱 | 型別 | 描述 |
|---|---|---|
| 標題(title) | string | 標題或內容field存在：title為標題，列印結果為 title:datafield不存在：title為內容，列印結果為title |
| 欄位(field) | string | 欄位名稱 |
| 圖片地址(src) | string | 當欄位不存在的情況下，顯示該地址指定的內容 |
| 顯示規則(showInPage) | string | 顯示規則僅頁首頁尾元素或位置固定固定有效 |
| 位置固定(fixed) | boolean | 位置固定 每頁列印到指定位置 位置固定的元素脫離正常的列印流，讓不在頁首頁尾範圍內的元素擁有每頁輸出的特性。 與面板指定頁頁尾線設定功能 相互協作 可以設定指定頁 不同的頁尾資訊展示。 |
| 拖動方向(axis) | string | 列印設計時拖拽方向 |
| 旋轉角度(transform) | number | 旋轉角度 |
# 2.2.4. 長文
長文字和文字的區別是長文字的邊框會隨著文字數據的長度變大，列印高度不斷變高，高度過高則自動分頁，長文字下方元素同步下移和長文字保持設定好的邊距，文字型別：定高定寬，列印區域不變。不會對其他列印元素造成影響。
| 名稱 | 型別 | 描述 |
|---|---|---|
| 標題(title) | string | 標題或內容field存在：title為標題，列印結果為 title:datafield不存在：title為內容，列印結果為title |
| 欄位(field) | string | 欄位名稱 |
| 測試數據(testData) | string | 測試數據,列印設計時 作為data,預覽或列印時被真實數據替換 |
| 字型(fontFamily) | string | 文字字型，預設為細明體 |
| 字型大小(fontSize) | number | 字型大小，預設為9pt |
| 字型粗細(fontWeight) | string | 字型粗細 |
| 字間距(letterSpacing) | number | 字間距 |
| 字型顏色(color) | number | 字型顏色 |
| 左右對齊(horizontalAlign) | string | 設定文字的水平對齊方式 |
| 字型行高(lineHeight) | number | 設定行高，預設值為9.75pt |
| 標題顯示隱藏(hideTitle) | boolean | 隱藏標題，預設為false |
| 每行縮排(longTextIndent) | number | 設定每行縮排的量 |
| 移除段落左側空白(leftSpaceRemoved) | boolean | 移除段落左側空白符 |
| 顯示規則(showInPage) | string | 顯示規則僅頁首頁尾元素或位置固定固定有效 |
| 隱藏規則(hideInPage) | string | 隱藏規則僅頁首頁尾元素或位置固定固定有效 |
| 位置固定(fixed) | boolean | 位置固定 每頁列印到指定位置 位置固定的元素脫離正常的列印流，讓不在頁首頁尾範圍內的元素擁有每頁輸出的特性。 與面板指定頁頁尾線設定功能 相互協作 可以設定指定頁 不同的頁尾資訊展示。 |
| 拖動方向(axis) | string | 列印設計時拖拽方向 |
| 最低高度(lHeight) | number | 當長文字或表格數據過少或為空，元素高度將是他們佔用的實際高度，下方元素保持原有間距。可以設定元素屬性來設定元素顯示的最小高度。 |
| 旋轉角度(transform) | number | 旋轉角度 |
| 左邊框 | string | 設定文字左邊框顯示樣式 |
| 上邊框 | string | 設定文字上邊框顯示樣式 |
| 右邊框 | string | 設定文字右邊框顯示樣式 |
| 下邊框 | string | 設定文字下邊框顯示樣式 |
| 邊框大小 | number | 設定邊框顯示時的預設大小 |
| 邊框顏色 | number | 設定邊框的顏色 |
| 左內邊距 | number | 文字內容與左邊框的距離 |
| 上內邊距 | number | 文字內容與上邊框的距離 |
| 右內邊距 | number | 文字內容與右邊框的距離 |
| 下內邊距 | number | 文字內容與下邊框的距離 |
| 背景顏色 | number | 設定文字的背景顏色 |
# 2.2.5. 表格
表格支援自定義功能，在表格頭部右鍵點選可喚出功能表，進行表格行列的自定義操作。
在表格頭部雙擊，可對錶格列標題以及對應顯示的欄位內容進行定義。其格式為表格列名稱#欄位名稱。
| 名稱 | 型別 | 描述 |
|---|---|---|
| 欄位(field) | string | 欄位名稱 |
| 字型(fontFamily) | string | 文字字型，預設為細明體 |
| 字型大小(fontSize) | number | 字型大小，預設為9pt |
| 左右對齊(textAlign) | string | 設定對齊方式 |
| 表格邊框(tableBorder) | string | 設定是否顯示錶格邊框 |
| 表頭邊框(tableHeaderBorder) | string | 設定表頭邊框 |
| 表頭單元格邊框(tableHeaderCellBorder) | string | 設定表格頭單元格邊框 |
| 表頭行高(tableHeaderRowHeight) | number | 表頭高度，單位為pt |
| 表頭字型大小(tableHeaderFontSize) | number | 表頭字型大小 |
| 表頭字型粗細(tableHeaderFontWeight) | string | 表頭字型粗細 |
| 表頭背景(tableHeaderBackground) | string | 表頭背景顏色 |
| 表體行高(tableBodyRowHeight) | number | 設定表體的行高 |
| 表體行邊框(tableBodyRowBorder) | string | 設定表體的行邊框 |
| 單元格邊框(tableBodyCellBorder) | string | 設定表體的單元格邊框 |
| 拖動方向(axis) | string | 列印設計時拖拽方向 |
| 最低高度(lHeight) | number | 當長文字或表格數據過少或為空，元素高度將是他們佔用的實際高度，下方元素保持原有間距。可以設定元素屬性來設定元素顯示的最小高度。 |
| 自動補全 | string | 是否設定表格的自動補全功能 |
| 表格腳顯示 | string | 設定表格腳顯示的樣式 |
# 2.2.6. 橫線
| 名稱 | 型別 | 描述 |
|---|---|---|
| 邊框顏色(borderColor) | string | 邊框顏色(可空) |
| 邊框大小(borderWidth) | string | 邊框大小(可空) |
| 顯示規則(showInPage) | string | 顯示規則僅頁首頁尾元素或位置固定固定有效 |
| 位置固定(fixed) | boolean | 位置固定 每頁列印到指定位置 位置固定的元素脫離正常的列印流，讓不在頁首頁尾範圍內的元素擁有每頁輸出的特性。 與面板指定頁頁尾線設定功能 相互協作 可以設定指定頁 不同的頁尾資訊展示。 |
| 拖動方向(axis) | string | 列印設計時拖拽方向 |
| 旋轉角度(transform) | number | 旋轉角度 |
| 邊框樣式(borderStyle) | string | 設定邊框樣式 |
# 2.2.7. 豎線
| 名稱 | 型別 | 描述 |
|---|---|---|
| 邊框顏色(borderColor) | string | 邊框顏色(可空) |
| 邊框大小(borderWidth) | string | 邊框大小(可空) |
| 顯示規則(showInPage) | string | 顯示規則僅頁首頁尾元素或位置固定固定有效 |
| 位置固定(fixed) | boolean | 位置固定 每頁列印到指定位置 位置固定的元素脫離正常的列印流，讓不在頁首頁尾範圍內的元素擁有每頁輸出的特性。 與面板指定頁頁尾線設定功能 相互協作 可以設定指定頁 不同的頁尾資訊展示。 |
| 拖動方向(axis) | string | 列印設計時拖拽方向 |
| 旋轉角度(transform) | number | 旋轉角度 |
| 邊框樣式(borderStyle) | string | 設定邊框樣式 |
# 2.2.8. 矩形
| 名稱 | 型別 | 描述 |
|---|---|---|
| 邊框顏色(borderColor) | string | 邊框顏色(可空) |
| 邊框大小(borderWidth) | string | 邊框大小(可空) |
| 顯示規則(showInPage) | string | 顯示規則僅頁首頁尾元素或位置固定固定有效 |
| 位置固定(fixed) | boolean | 位置固定 每頁列印到指定位置 位置固定的元素脫離正常的列印流，讓不在頁首頁尾範圍內的元素擁有每頁輸出的特性。 與面板指定頁頁尾線設定功能 相互協作 可以設定指定頁 不同的頁尾資訊展示。 |
| 拖動方向(axis) | string | 列印設計時拖拽方向 |
| 旋轉角度(transform) | number | 旋轉角度 |
| 邊框樣式(borderStyle) | string | 設定邊框樣式 |
# 2.2.9. 橢圓
| 名稱 | 型別 | 描述 |
|---|---|---|
| 邊框顏色(borderColor) | string | 邊框顏色(可空) |
| 邊框大小(borderWidth) | string | 邊框大小(可空) |
| 顯示規則(showInPage) | string | 顯示規則僅頁首頁尾元素或位置固定固定有效 |
| 位置固定(fixed) | boolean | 位置固定 每頁列印到指定位置 位置固定的元素脫離正常的列印流，讓不在頁首頁尾範圍內的元素擁有每頁輸出的特性。 與面板指定頁頁尾線設定功能 相互協作 可以設定指定頁 不同的頁尾資訊展示。 |
| 拖動方向(axis) | string | 列印設計時拖拽方向 |
| 旋轉角度(transform) | number | 旋轉角度 |
| 邊框樣式(borderStyle) | string | 設定邊框樣式 |
# 2.2.10. 頁碼
頁碼位於面板中，在列印設計時雙擊頁碼區域可啟用或者禁用頁碼顯示。其中頁碼的顯示格式可以在面板的頁碼格式屬性中進行修改。預設格式為pageNo-pageCount。
# 2.2.11. 頁首
在列印設計界面下，拖拽頁首的位置可引出頁首線，在設計中可通過拖拽頁首線來改變頁首線所在的位置。
# 2.2.12. 頁尾
在列印設計界面下，拖拽頁尾的位置可引出頁尾線，在設計中可通過拖拽頁尾線來改變頁尾線所在的位置。
# 3. 引入數據
列印模板設計完成後，需要在其中匯入列印的數據。列印數據的樣例格式如下。數據以JSON格式組裝。
var printData = {
company:'中國XXX科技有限公司',
address:'浙江省嘉興市XX區XX路XX號人才中心2樓888號',
telphone:'18888888888',
total:'1000',
amount:'100000',
table:[{
MeterCode:'214',
MeterName:'二分廠 動力電（油煙機）',
MeterLevel:'2',
MeterType:'電錶',
EnergyType:'動力電',
Dept:'二分廠',
Location:'',
Provider:'',
Spec:'',
CommType:'RS485',
SerialPort:'',
SerialServer:'192.168.6.11',
Address:'',
Interval:'30000',
Ratio:'1',
BaudRate:'9600',
StopBits:'1',
DataBits:'8',
Parity:'無',
Note:'',
IsUse:'True',
},{
MeterCode:'215',
MeterName:'二分廠 動力電（染缸7號）',
MeterLevel:'2',
MeterType:'電錶',
EnergyType:'動力電',
Dept:'二分廠',
Location:'染色車間',
Provider:'',
Spec:'',
CommType:'RS485',
SerialPort:'',
SerialServer:'192.168.6.11',
Address:'',
Interval:'30000',
Ratio:'1',
BaudRate:'9600',
StopBits:'1',
DataBits:'8',
Parity:'無',
Note:'',
IsUse:'True',
}]};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
對於非表格型別的基本數據，其樣式如下。
var printData = {
company:'中國XXX科技有限公司',
address:'浙江省嘉興市XX區XX路XX號人才中心2樓888號'
}
1
2
3
4
2
3
4
其中的company和address與列印模板設計時元素的欄位名稱屬性對應，JSON中的取值會對應顯示為列印模板中繫結元素的輸出結果。
表格型別的基本數據元素格式如下。其中的table對應為表格繫結的欄位名稱。如有多個表格，則可自行定義表格欄位的名稱，並在JSON中引入該欄位名稱進行數據繫結。
var printData = {
table:[{
MeterCode:'214',
MeterName:'二分廠 動力電（油煙機）',
MeterLevel:'2',
MeterType:'電錶',
EnergyType:'動力電',
Dept:'二分廠',
Location:'',
Provider:'',
Spec:'',
CommType:'RS485',
SerialPort:'',
SerialServer:'192.168.6.11',
Address:'',
Interval:'30000',
Ratio:'1',
BaudRate:'9600',
StopBits:'1',
DataBits:'8',
Parity:'無',
Note:'',
IsUse:'True'
},{
MeterCode:'215',
MeterName:'二分廠 動力電（染缸7號）',
MeterLevel:'2',
MeterType:'電錶',
EnergyType:'動力電',
Dept:'二分廠',
Location:'染色車間',
Provider:'',
Spec:'',
CommType:'RS485',
SerialPort:'',
SerialServer:'192.168.6.11',
Address:'',
Interval:'30000',
Ratio:'1',
BaudRate:'9600',
StopBits:'1',
DataBits:'8',
Parity:'無',
Note:'',
IsUse:'True'
}]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
# 4. 在程式中使用數據
在程式設計界面中引入列印的相關函式，勾選Print單元。其中包含幾個基本的函式。
CreatePrintDataJson可以把數據集中的數據轉換為適用於表格的數據格式。
PrintPreview用於輸出列印數據並執行列印操作(列印預覽，直接列印等)。
//JScript
//將數據傳遞至名稱為儀表資料的列印模板中並執行直接列印操作
PrintPreview("儀表資料",PrintData,1);
//將數據傳遞至名稱為儀表資料的列印模板中並執行列印預覽操作
PrintPreview("儀表資料",PrintData,0);
1
2
3
4
5
2
3
4
5
//PasScript
//將數據傳遞至名稱為儀表資料的列印模板中並執行直接列印操作
PrintPreview('儀表資料',PrintData,1);
//將數據傳遞至名稱為儀表資料的列印模板中並執行列印預覽操作
PrintPreview('儀表資料',PrintData);
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
一個典型的列印操作程式如下：
//JScript
function btPrintOnClick(sender)
{
var printData;
PrintData = "var printData = { "+#13+
"company:'中國XXXX有限公司',"+#13+
"address:'XXXX',"+#13+
"telphone:'18888888888',"+#13+
"table:"+CreatePrintDataJson(dtsMeter)+"};";
PrintPreview("儀表資料",PrintData,1);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
//PasScript
procedure btPrintOnClick(sender: tobject);
Var
printData:String;
begin
PrintData := 'var printData = { '+#13+
'company:''中國XXXX有限公司'','+#13+
'address:''XXXX'','+#13+
'telphone:''18888888888'','+#13+
'table:'+CreatePrintDataJson(dtsMeter)+'};';
PrintPreview('儀表資料',PrintData,1);
end;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group