logo
small logo
  • Produkty
  • Zamów
  • Wsparcie techniczne
  • Articles
  • Customer panel Wsparcie techniczne
    • en
    • pt
    • es
    • de
    • pl
    • JP
    • ZH
  • Glówna strona
  • /
  • Articles
  • /
  • HTML 4.0 i CSS w raporcie - proste! Przedstawienie nowego obiektu raportu "HTMLView".
  • 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
  • FastCube – szybki OLAP Cube Engine i Pivot Grid

    29 lutego 2020

    Trudno sobie wyobrazić wykonanie analizy danych bez technologii OLAP (On-Line Analytical Processing). Jednak są różne

    read more
  • Tworzenie raportów za pomocą formularzy dialogowych

    26 kwietnia 2021

    W naszych poprzednich artykułach w ramach programu edukacyjnego "Akademik" nauczyliśmy się instalować FastReportw Lazarusie, opanowaliśmy

    read more
  • Rodzina generatorów raportów FastReport krótka recenzja

    23 marca 2020

    Bez raportowania nie da się prowadzić działalności w żadnej dziedzinie. Biurokracja jest nieodłączną częścią ludzkiego

    read more
  • Jak drukować wizytówki z aplikacji Delphi

    24 sierpnia 2020

    Aplikacje wbudowane w Delphi są mniej powszechne niż, na przykład, te wbudowane w C #.

    read more

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

26 maja 2021

 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 pobierz zamów
avatar
Den Zubov
VCL Development
Fast Reports Team: Den Zubov - VCL Development at Fast Reports
VCL FastReport Data Source HTML CSS HTMLView

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
  • Ticket system
  • FAQ
  • Tutorial Video
  • Forum
  • Articles
  • Our News
  • Prasa o nas
  • Partnerzy
  • Extended licensing
  • Kontakty

© 1998-2022 by Fast Reports Inc.

  • Poufność