عقدة دلفي مع html - نسخة قابلة للطباعة

كود :
unit MainForm;

interface

uses
  Winapi.Windows, System.SysUtils, System.Classes, Vcl.Forms, Vcl.StdCtrls,
  Vcl.Edge, FireDAC.Comp.Client, FireDAC.Phys.SQLite, FireDAC.Stan.Intf,
  System.JSON;

type
  TForm1 = class(TForm)
    FDConnection1: TFDConnection;
    FDQuery1: TFDQuery;
    EdgeBrowser1: TEdgeBrowser;
    BtnLoadData: TButton;
    procedure FormCreate(Sender: TObject);
    procedure BtnLoadDataClick(Sender: TObject);
    procedure EdgeBrowser1WebMessageReceived(Sender: TObject;
      const Args: TWebMessageReceivedEventArgs);
  private
    procedure CreateDemoDatabase;
  public
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.FormCreate(Sender: TObject);
begin
  CreateDemoDatabase;

  FDConnection1.DriverName := 'SQLite';
  FDConnection1.Params.Values['Database'] := ExtractFilePath(ParamStr(0)) + 'demo.db';
  FDConnection1.LoginPrompt := False;

  try
    FDConnection1.Connected := True;
  except
    on E: Exception do
      ShowMessage('خطأ في الاتصال: ' + E.Message);
  end;
end;

procedure TForm1.CreateDemoDatabase;
var
  DBPath: string;
begin
  DBPath := ExtractFilePath(ParamStr(0)) + 'demo.db';
  if not FileExists(DBPath) then
  begin
    FDConnection1.DriverName := 'SQLite';
    FDConnection1.Params.Values['Database'] := DBPath;
    FDConnection1.Connected := True;
    FDConnection1.ExecSQL('CREATE TABLE Employees (ID INTEGER PRIMARY KEY, Name TEXT, Dept TEXT)');
    FDConnection1.ExecSQL('INSERT INTO Employees VALUES (1, "أحمد محمد", "تقنية المعلومات")');
    FDConnection1.ExecSQL('INSERT INTO Employees VALUES (2, "سارة علي", "الموارد البشرية")');
    FDConnection1.ExecSQL('INSERT INTO Employees VALUES (3, "خالد حسن", "المحاسبة")');
    FDConnection1.Connected := False;
  end;
end;

procedure TForm1.BtnLoadDataClick(Sender: TObject);
var
  HTML: string;
  RowHTML: string;
  ID, Name, Dept: string;
begin
  FDQuery1.Close;
  FDQuery1.SQL.Text := 'SELECT ID, Name, Dept FROM Employees ORDER BY ID';
  FDQuery1.Open;

  HTML := '<!DOCTYPE html>' +
          '<html lang="ar" dir="rtl">' +
          '<head><meta charset="UTF-8"><title>بيانات الموظفين</title>' +
          '<style>body{font-family:Segoe UI,sans-serif;padding:20px;background:#f5f7fa;}' +
          'table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.1);}' +
          'th,td{padding:12px;border:1px solid #ddd;text-align:center;}' +
          'th{background:#4a90e2;color:#fff;}tr:hover{background:#f0f4f8;}' +
          'button{padding:10px 20px;margin-top:20px;cursor:pointer;background:#27ae60;color:#fff;border:none;border-radius:6px;}' +
          '</style></head><body>' +
          '<h2>? جدول الموظفين</h2>' +
          '<table><tr><th>المعرف</th><th>الاسم</th><th>القسم</th></tr>';

  while not FDQuery1.Eof do
  begin
    ID   := FDQuery1.FieldByName('ID').AsString;
    Name := FDQuery1.FieldByName('Name').AsString;
    Dept := FDQuery1.FieldByName('Dept').AsString;

    // حماية بسيطة من حقن HTML
    Name := StringReplace(Name, '<', '&lt;', [rfReplaceAll]);
    Dept := StringReplace(Dept, '<', '&lt;', [rfReplaceAll]);

    RowHTML := Format('<tr><td>%s</td><td>%s</td><td>%s</td></tr>', [ID, Name, Dept]);
    HTML := HTML + RowHTML;
    FDQuery1.Next;
  end;

  HTML := HTML + '</table>' +
          '<button onclick="window.chrome.webview.postMessage(''refresh'')">? تحديث البيانات</button>' +
          '<script>function addLog(m){window.chrome.webview.postMessage(m);}</script>' +
          '</body></html>';

  EdgeBrowser1.NavigateToString(HTML);
end;

procedure TForm1.EdgeBrowser1WebMessageReceived(Sender: TObject;
  const Args: TWebMessageReceivedEventArgs);
var
  Msg: string;
begin
  if Args.TryGetWebMessageAsString(Msg) then
  begin
    if Msg = 'refresh' then
      BtnLoadDataClick(Sender);
  end;
end;

end.