FastWeb之線上報表列印

• 適用平臺：WEB(桌面)

1. 說明

  該範例可實現簡單報表列印格式的線上設計以及列印的功能。通過圖形化的方式可自行設計文字，表格等在內內容，並通過在模組中執行呼叫實現列印預覽以及列印的效果。關於列印格式設計的部分可參考FastWeb學習手冊之列印模板設計進行設計。該報表功能僅能實現簡單的表格資訊列印效果，如有複雜的報表列印格式需求，請參考FastWeb之Flying網路列印文件。

  通過本範例學習，可以掌握呼叫已存在的列印模板，傳遞數據給列印模板實現列印的功能。

2. 設計明細

  開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

  ①：TUgButton元件，控制元件名稱為btnPrint。

  ②：TUgButton元件，控制元件名稱為btPreview。

  ③：TUgContainerPanel元件，控制元件名稱為UgContainerPanel01。

  ④：TUgDataSource元件，控制元件名稱為dsMeter。

  ⑤：TUgRFDataSet元件，控制元件名稱為dtsMeter。

  ⑥：TUgDBGrid元件，控制元件名稱為UgDBGrid01。

• UgWebRunFrame屬性設定

  • Height：設定頁面高度=600。
  • Width：設定頁面寬度=1200。

• ①btPrint屬性設定

  • Caption：設定按鈕顯示的標籤內容，設定為=直接列印。
  • Name：設定控制元件名稱為btPrint。

• ②btPreview屬性設定

  • Caption：設定按鈕顯示的標籤內容，設定為=列印預覽。
  • Name：設定控制元件名稱為btPreview。

• ③UgContainerPanel屬性設定

  • Align：設定對齊方式=alTop。

• ④dsMeter屬性設定

  • DataSet：設定繫結的數據集控制元件，設定為dtsMeter。
  • Name：設定控制元件名稱為dsMeter。

• ⑤dtsMeter屬性設定

  • SQL：設定查詢的SQL語句，設定為Select * from Ems_Meter Order by MeterType,EnergyType。

• ⑥UgDBGrid01屬性設定

  • Align：設定對齊方式=alClient。
  • DataSource：設定其繫結的數據源=dsMeter。
  • Options：設定相關選項，dgRowNumbers設定為True。
  • WebOptions：設定網頁顯示的相關選項，其中設定Paged為False。
  • 在控制元件界面上雙擊，打開欄位編輯器，在其中新增如下圖所示的欄位內容。

  

3. 程式設計

  點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式的程式需要引用TARS、Print單元。

3.1. 程式初始設定

  程式啟動時，打開數據。

Begin
//獲取數據
  dtsMeter.Connection := GetRFWeb;
  dtsMeter.Open;   
End.

3.2. 事件設定

• ①btPrint-OnClick事件

  點選[直接列印]按鈕，開啟列印界面。

//JScript
function btPrintOnClick(sender)
//列印
{
  var PrintData;
  PrintData = "var printData = { "+#13+
  "company:'"+ UGMM.LT("XX科技有限公司") + "',"+#13+
  "address:'"+ UGMM.LT("XX省XX市XX區XXX路XXX號XXX號樓XXX") + "',"+#13+
  "telphone:'18888888888',"+#13+
  "table:"+CreatePrintDataJson(dtsMeter)+"};";
  //showmessage(PrintData);
  PrintPreview(UGMM.LT("儀表資料"),PrintData,1);
}

//PasScript
procedure btPrintOnClick(sender: tobject);
//列印
Var
 printData:String;
begin
  PrintData := 'var printData = { '+#13+
  'company:'''+ UGMM.LT('XX科技有限公司') + ''','+#13+
  'address:'''+ UGMM.LT('XX省XX市XX區XXX路XXX號XXX號樓XXX') + ''','+#13+
  'telphone:''18888888888'','+#13+
  'table:'+CreatePrintDataJson(dtsMeter)+'};';
  //showmessage(PrintData);
  PrintPreview(UGMM.LT('儀表資料'),PrintData,1);
end;

// Make sure to add code blocks to your code group

• ②btPreview-OnClick事件

  點選[列印預覽]按鈕，開啟列印預覽界面。

//JScript
function btPreviewOnClick(sender)
{
  var PrintData;
  PrintData = "var printData = { "+#13+
  "company:'"+ UGMM.LT("XX科技有限公司") + "',"+#13+
  "address:'"+ UGMM.LT("XX省XX市XX區XXX路XXX號XXX號樓XXX") + "',"+#13+
  "telphone:'18888888888',"+#13+
  "table:"+CreatePrintDataJson(dtsMeter)+"};";
  //showmessage(PrintData);
  PrintPreview(UGMM.LT("儀表資料"),PrintData,0);
}

//PasScript
procedure btPreviewOnClick(sender: tobject);
Var
 printData:String;
begin
  PrintData := 'var printData = { '+#13+
  'company:'''+ UGMM.LT('XX科技有限公司') + ''','+#13+
  'address:'''+ UGMM.LT('XX省XX市XX區XXX路XXX號XXX號樓XXX') + ''','+#13+
  'telphone:''18888888888'','+#13+
  'table:'+CreatePrintDataJson(dtsMeter)+'};';
  //showmessage(PrintData);
  PrintPreview(UGMM.LT('儀表資料'),PrintData);
end;

// Make sure to add code blocks to your code group

4. 運行結果

  使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

  打開程式后，點選[直接列印]或者[列印預覽]，在彈出的視窗中顯示列印設定或者列印預覽的界面。