Flying網路列印(WEB)

# FastWeb之Flying網路列印

適用平臺：WEB(桌面)

# 1. 說明

本範例採用HTTP通訊協議，連線列印伺服器進行列印操作。該範例需配合愛招飛旗下的Flying(飛印，區域網資料包表列印工具)使用。

請注意，該範例僅在輸出檔案型別為pdf時可在列印預覽界面檢視輸出的文件，其他輸出的檔案型別無法預覽檢視。

FastWeb中暫不支援MQTT通訊協議的列印模式。

在使用該範例前，請按照Flying操作手冊之快速上手中的內容建立報表列印格式。

通過本範例學習，可以掌握TUgFlying控制元件的使用方式。

# 2. 設計明細

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

①：TUgEdit元件，控制元件名稱為UgEdit01。

②：TUgSpinEdit元件，控制元件名稱為UgSpinEdit01。

③：TUgButton元件，控制元件名稱為UgButton01。

④：TUgRFDataSet元件，控制元件名稱為UgRFDataSet01。

⑤：TUgFlying元件，控制元件名稱為UgFlying01。

⑥：TUgComboBox元件，控制元件名稱為UgComboBox02。

⑦：TUgSpinEdit元件，控制元件名稱為UgSpinEdit02。

⑧：TUgFSToggle元件，控制元件名稱為UgFSToggle01。

⑨：TUgButton元件，控制元件名稱為UgButton02。

⑩：TUgPDFFrame元件，控制元件名稱為UgPDFFrame01。

UgWebRunFrame屬性設定
- Height：設定頁面高度=767。
- Width：設定頁面寬度=954。
UgPanel01屬性
- Anchors：設定控制元件定位錨。將其中的所有選項akLeft、akTop、akRight、akBottom均設定為True。
①UgEdit01屬性設定
- FieldLabel：設定標籤顯示的文字=伺服器地址。
- FieldLabelWidth：設定標籤顯示文字的寬度=80。
- Text：設定標籤顯示的文字。此處需設定為伺服器所在的地址。
②UgSpinEdit01屬性設定
- FieldLabel：設定標籤顯示的文字=埠號。
- FieldLabelWidth：設定標籤顯示文字的寬度=80。
- Value：設定編輯框中顯示的數值，設定為8801，該埠號為Flying的HTTP列印預設地址。
③UgButton01屬性設定
- Caption：設定按鈕顯示的文字內容，設定為獲取印表機列表。
④UgRFDataSet01屬性設定
- SQL：設定其中填寫的SQL查詢內容，設定為SELECT * FROM Basic_Unit。
⑤UgFlying01屬性設定
- ReportName：設定列印格式的名稱，此處設定為test.fr3。
⑥UgComboBox02屬性設定
- FieldLabel：設定標籤顯示的文字=印表機。
- FieldLabelWidth：設定標籤顯示文字的寬度=80。
⑦UgSpinEdit02屬性設定
- FieldLabel：設定標籤顯示的文字=列印份數。
- FieldLabelWidth：設定標籤顯示文字的寬度=80。
- Value：設定編輯框中顯示的數值，設定為1，設定預設列印的份數。
⑧UgFSToggle01屬性設定
- Toggled：設定開關是否處於開啟狀態，設定為True。
⑨UgButton02屬性設定
- Caption：設定按鈕顯示的文字內容，設定為執行列印。
⑩UgPDFFrame01屬性設定
- Align：設定控制元件的對齊方式，設定為alClient，即客戶區對齊。

# 3. 程式設計

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

# 3.1. 程式初始設定

在程式啟動時進行初始賦值。

//JScript
{
  UgEdit01.OnChange = &UgEdit01OnChange;
  UgSpinEdit01.OnChange = &UgSpinEdit01OnChange;
  UgSpinEdit02.OnChange = &UgSpinEdit02OnChange;
  UgButton01.OnClick = &UgButton01OnClick;
  UgButton02.OnClick = &UgButton02OnClick;
  UgFlying01.OnReceived = &UgFlying01OnReceived;
}
function UgWebRunFrameOnAfterRunScript(sender)
{
  UGMM.LC(Self);
  UgFlying01.HTTPOptions.Host = UgEdit01.Text;
  UgFlying01.HTTPOptions.Port = UgSpinEdit01.Value;
  UgFlying01.MQTTOptions.BrokerHost = UgEdit01.Text;
  UgFlying01.PrintOptions.PrintCopies = UgSpinEdit02.Value;
  UgFDQuery01.Connection = UGMM.GetNodeDataLink("demo");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
//翻譯
begin
  UGMM.LC(Self);
  UgFlying01.HTTPOptions.Host := UgEdit01.Text;
  UgFlying01.HTTPOptions.Port := UgSpinEdit01.Value;
  UgFlying01.MQTTOptions.BrokerHost := UgEdit01.Text;
  UgFlying01.PrintOptions.PrintCopies := UgSpinEdit02.Value;
  UgFDQuery01.Connection := UGMM.GetNodeDataLink("demo");
end;

1
2
3
4
5
6
7
8
9
10
11

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

# 3.2. 事件設定

①UgEidt01-OnChange事件

填寫伺服器地址，該地址會回傳給UgFlying01控制元件。

//JScript
function UgEdit01OnChange(sender){
  //修改列印伺服器地址。
  UgFlying01.HTTPOptions.Host = UgEdit01.Text;
  UgFlying01.MQTTOptions.BrokerHost = UgEdit01.Text;
  UgFlying01.WebSocketOptions.Host = UgEdit01.Text;
}

1
2
3
4
5
6
7

//PasScript
procedure UgEdit01OnChange(sender: tobject);
//修改列印伺服器地址。
begin
  UgFlying01.HTTPOptions.Host := UgEdit01.Text;
  UgFlying01.MQTTOptions.BrokerHost := UgEdit01.Text;
  UgFlying01.WebSocketOptions.Host := UgEdit01.Text;
end;

1
2
3
4
5
6
7
8

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

②UgSpinEdit01-OnChange事件

修改伺服器埠號。

//JScript
function UgSpinEdit01OnChange(sender){
  //修改伺服器埠號
  UgFlying01.HTTPOptions.Port = UgSpinEdit01.Value;
  UgFlying01.WebSocketOptions.Port = UgSpinEdit01.Value;
}

1
2
3
4
5
6

//PasScript
procedure UgSpinEdit01OnChange(sender: tobject);
//修改伺服器埠號
begin
  UgFlying01.HTTPOptions.Port := UgSpinEdit01.Value;
  UgFlying01.WebSocketOptions.Port := UgSpinEdit01.Value;
end;

1
2
3
4
5
6
7

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

⑦UgSpinEdit02-OnChange事件

修改列印份數。

//JScript
function UgSpinEdit02OnChange(sender){
  //修改列印份數
  UgFlying01.PrintOptions.PrintCopies = UgSpinEdit02.Value;
}

1
2
3
4
5

//PasScript
procedure UgSpinEdit02OnChange(sender: tobject);
//修改列印份數
begin
  UgFlying01.PrintOptions.PrintCopies := UgSpinEdit02.Value;
end;

1
2
3
4
5
6

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

③UgButton01-OnClick事件

點選[獲取印表機列表]，獲取印表機設備並顯示在選擇框中。

//JScript
function UgButton01OnClick(sender){
  //載入印表機列表
  UgFlying01.GetPrinterList;
}

1
2
3
4
5

//PasScript
procedure UgButton01OnClick(sender: tobject);
//載入印表機列表
begin
  UgFlying01.GetPrinterList;
end;

1
2
3
4
5
6

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

④UgButton02-OnClick事件

點選[執行列印]按鈕，將執行列印操作。

//JScript
function UgButton02OnClick(sender){
  if (demo) {return;}
  if (UgComboBox02.Items.Text == "") {return;}
  UgFlying01.PrintOptions.PrinterName = UgComboBox02.Items.Strings[UgComboBox02.ItemIndex];
  UgFDQuery01.SQL.Text = "SELECT * FROM Basic_Unit";
  UgFDQuery01.Open;
  UgFlying01.AddPrintData(TDataSet(UgFDQuery01),"A");
  UgFlying01.ReportPrint;
}

1
2
3
4
5
6
7
8
9
10

//PasScript
procedure UgButton02OnClick(sender: tobject);
//點選圖片傳輸列印
begin
  if demo then exit;
  if UgComboBox02.Items.Text := '' then exit;
  UgFlying01.PrintOptions.PrinterName := UgComboBox02.Items.Strings[UgComboBox02.ItemIndex];
  UgRFDataSet01.SQL.Text := 'SELECT * FROM Basic_Unit';
  UgRFDataSet01.Open;
  UgFlying01.AddPrintData(UgRFDataSet01,'A');
  UgFlying01.Data.Text := DataToJson(UgRFDataSet01,'A');
  UgFlying01.ReportPrint;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13

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

⑤UgFlying01-OnReceived事件

接收相關的列印事件。

//JScript
function UgFlying01OnReceived(asender,atype,acontent){
  var Guid = UGMM.CreateGuid;
    if (atype == "GetPrinterList"){ 
      UgComboBox02.Items.CommaText = acontent;
      if (UgComboBox02.ItemIndex != 0){
        UgComboBox02.ItemIndex = 0;
        }
    }
    if (atype == "GetReportFile"){
      if (UgFSToggle01.Toggled){
       if (UGMM.URLDownloadToFile(acontent,"temp\\" + Guid + "-report.pdf") <= 1){ 
          UgPDFFrame01.PdfURL = "temp/" + Guid + "-report.pdf";
        }
      }
    }
    if (atype == "error"){
      Showmessage(acontent);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//PasScript
procedure UgFlying01OnReceived(asender: tobject;atype: string;acontent: string);
//獲取接受的資訊
var
  Guid:String;
begin
    Guid := UGMM.CreateGuid;
    if atype = 'GetPrinterList' Then
    begin 
      UgComboBox02.Items.CommaText := acontent;
      if UgComboBox02.ItemIndex <> 0 Then
        UgComboBox02.ItemIndex := 0;
    End;
    if AType='GetReportFile' then
    Begin
      if UgFSToggle01.Toggled Then
      Begin
        if UGMM.URLDownloadToFile(acontent,'temp\' + Guid + 'report.pdf') <= 1 then 
        begin
          UgPDFFrame01.PdfURL := 'temp/' + Guid + '-report.pdf';
        End;
      End;
    End;
    if AType='error' then
      Showmessage(AContent);
end;

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

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

# 4. 運行結果

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

在打開的程式中填寫伺服器地址，確認埠號無誤后，點選[獲取印表機列表]，下方的印表機選框中出現可選擇的印表機列表，點選右側的下拉按鈕下拉選擇所需的印表機。點選[執行列印]按鈕，右側的列印預覽界面顯示輸出的PDF檔案的預覽界面。

← 郵件發送-控制元件(WEB) 線上報表列印(WEB)→