logo
small logo
  • Produkty
  • Zamów
  • Wsparcie techniczne
  • About
  • Customer panel Wsparcie techniczne
    • en
    • de
    • JP
    • ZH
  • Glówna strona
  • /
  • Articles
  • /
  • HTML 4.0 i CSS w raporcie - proste! Przedstawienie nowego obiektu raportu "HTMLView".
  • Przekształcanie danych z bazy danych w dokument w Delphi / Lazarus / C++ Builder

    3 lutego 2021

    Jak z gąszczu danych zrobić czytelny raport? Oracle DB, MySQL, Microsoft SQL Server, PostgreSQL, FireBird to

    read more
  • Jak utworzyć jeden raport z wielu w Delphi / Lazarus / C++ Builder

    11 grudnia 2020

    Chciałbym zauważyć, że FastReport VCL jest jednym z najwygodniejszych komponentów do generowania raportów o dowolnej

    read more
  • Rozszerzenie komponentów klient-serwer do odbierania i przesyłania plików fp3

    13 grudnia 2021

    Obieg dokumentów odgrywa ważną rolę w procesie tworzenia systemu korporacyjnego. Format fp3 jest głównym

    read more
  • Jak utworzyć plik warstwowy HTML/HTML5 z Delphi / C++Builder / Lazarus

    27 sierpnia 2020

    "Jak zapisać w formacie HTML z Delphi?", "jak stworzyć plik HTML 5 z Delphi?", "jak

    read more
  • Jak podłączyć plik CSV jako DataSet w Delphi i zbudować raport przy użyciu FastReport VCL 6

    12 maja 2020

    Prawdopodobnie wielu z Was napotkało problem z używaniem pliku CSV jako zestawu danych w Delphi. Przyjrzyjmy

    read more

HTML 4.0 i CSS w raporcie - proste! Przedstawienie nowego obiektu raportu "HTMLView".

26 maja 2021

HTML 4.0

 FastReport VCL + HTML   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

Połącz się z danymi

Teraz możemy umieścić "HTMLView" z palety obiektów raportu na utworzonej zakładce danych.

Utwórz obiekt HTML

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.

Edytor wyrażeń HTML

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

Set StrechMode

I to wszystko! Po prostu uruchom raport i sprawdź wynik.

Podgląd Raportu

Jak widać, zastosowanie HTML4.0 i CSS z linkami do danych jest bardzo proste w nowej wersji FastReport VCL 2021.2.

about product zamów
avatar
Den Zubov
VCL Development
Fast Reports Team: Den Zubov - VCL Development at Fast Reports
VCL FastReport Data Source HTML

Add comment
logo
  • 800-985-8986 (English, US)
  • +4930568373928 (German)
  • +55 19 98147-8148 (Portuguese)
  • info@fast-report.com
  • 901 N Pitt Str #325 Alexandria VA 22314
  • Zamów
  • Pobierz
  • Dokumentacja
  • Opinie użytkowników
  • Jak odinstalować nasze produkty
  • FAQ
  • Tutorial Video
  • Forum
  • Articles
  • Our News
  • Prasa o nas
  • Partnerzy
  • Extended licensing
  • Kontakty

© 1998-2023 by Fast Reports Inc.

  • Poufność