Przy bardzo dużej różnorodności formatów dokumentów, często może dojść do sytuacji, kiedy klient chce wykorzystać jakieś formaty dokumentów, które już posiada i nie tracić czasu na tworzenie takiego samego układu w raporcie. Dla tych przypadków FastReport VCL umożliwa wykorzystanie tagów RichText lub HTML w obiekcie tekstowym, jednakże czasami to nie wystarcza.
Od wersji 2021.2 FastReport VCL rozszerzamy zestaw narzędzi do formatowania tekstu.
Nowy obiekt HTMLView może wczytać HTML4 ze stylami CSS i stosować go wraz z wyrażeniami wewnątrz raportu, łączeniem pól danych i innymi zaawansowanymi możliwościami FastReport VCL.
Prześledzimy krok po kroku, jak wykorzystać "HTMLView" w raporcie. Po pierwsze, należy dodać pakiet obiektów do aplikacji. W tym celu musimy po prostu umieścić "TfrxHTMLObject" na formularzu aplikacji lub dodać moduł frxHTML do pola uses aplikacji.
Teraz, gdy już obiekt jest zarejestrowany, możemy go używać z poziomu kreatora raportów w czasie rzeczywistym.
Uruchom projektanta raportów. Na początek musimy wybrać dane, które chcemy wykorzystać. W tym artykule użyjemy tabeli Biolife ze standardowej bazy danych (Main Demo). Raport będzie prezentował informacje na temat ryb wraz z obrazkami.
Connect to dataset
Teraz możemy umieścić "HTMLView" z palety obiektów raportu na utworzonej zakładce danych.
W naszym przykładzie kod HTML został wcześniej utworzony i wstawiony z poziomu schowka. Możliwe jest również wczytanie kodu HTML z pliku. Kod powinien zawierać tylko HTML4.0 i CSS (JavaScript i inne rozszerzenia sieciowe nie są wspierane).
Dla lepszego rozmieszczenia danych wewnątrz kodu HTML używamy tabeli, która posiada wszystkie potrzebne pola danych.
| HTML Example | |
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 53 54 55 56 57 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .t1{ table-layout: fixed; } .c1{ word-wrap:break-word; } .rightimg { float: right; margin: 7px 0 7px 7px; } .s0 { font-family: Arial; font-size: 16px; color: #000000; font-weight: bold; font-style: normal; background-color: #BAD3FE; border-left-color:#C0C0C0; border-left-style: solid; border-left-width: 1px; border-right-color:#C0C0C0; border-right-style: solid; border-right-width: 1px; border-top-color:#C0C0C0; border-top-style: solid; border-top-width: 1px; border-bottom-color:#C0C0C0; border-bottom-style: solid; border-bottom-width: 1px; text-align: Left; vertical-align: Top; padding-top: 1px; padding-left: 2px; } </style> </head> <body> <table class="t1" border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <td colspan="2" class="s0"></td> </tr> <tr> <td><b>Category</b></td><td></td> </tr> <tr> <td><b>Species Name</b></td><td></td> </tr> <tr> <td><b>Length (cm)</b></td><td></td> </tr> <tr> <td><b>Length In</b></td><td ></td> </tr> <tr> <td class="c1"><span style="max-width:150px;"></span></td> <td><img src=""></td> </tr> </tbody> </table> </body> </html> |
Teraz, jeżeli chcemy połączyć nasz kod HTML z polami danych, wystarczy użyć edytora obiektów z edytorem wyrażeń i wstawić wyrażenia danych.
Pole danych obrazu zostanie automatycznie zakodowane do base64 z prawidłowym rodzajem mime obrazów przechowywanych w bazie danych. FastReport VCL zrobi to automatycznie.
Obiekt "HTMView" obsługuje powiększanie do dołu (rozciąganie) w stosunku do zawartości wewnątrz obiektu, tak samo jak obiekt "RichText". I oczywiście obiekt "HTMLView" wspiera podział danych, gdy strony raportu nie mają wystarczająco dużo wolnego miejsca. Rozciągnięcie danych i podział danych można aktywować tak samo jak w innych obiektach raportów w FastReport VCL. Najpierw należy ustawić właściwości Stretched i AllowSplit. Następnie ustaw właściwość StretchMode obiektu "HTMLView" w naszym przypadku na smActualHeigh
I to wszystko! Po prostu uruchom raport i sprawdź wynik.
Jak widać, zastosowanie HTML4.0 i CSS z linkami do danych jest bardzo proste w nowej wersji FastReport VCL 2021.2.
