logo
small logo
  • Продукты
  • Купить
  • Поддержка
  • Статьи
  • Клиентская панель Поддержка
  • Главная
  • /
  • Статьи
  • /
  • HTML 4.0 и CSS в отчёте – Легко! Обзор использования нового объекта отчета "HTMLView".
  • Расширение клиент-серверных компонентов на приём и передачу файлов в формате fp3

    13 декабря 2021 г.

    Для построения корпоративной системы важную роль играет документооборот. Если в вашей системе используется FastReport

    Подробнее
  • FastCube - высокоскоростной движок OLAP-кубов и Pivot Grid

    29 февраля 2020 г.

    Сложно представить анализ данных без технологии OLAP (On-Line Analytical Processing). Хотя существуют разные мнения по

    Подробнее
  • Использование интерактивных карт в FastReport VCL 2021

    30 апреля 2021 г.

    Представляем вам заключительную статью по курсам образовательной программы «Академик». В предыдущих публикациях было рассмотрено

    Подробнее
  • Семейство генераторов отчетов FastReport - быстрый обзор

    23 марта 2020 г.

    Отчетность – без нее невозможно вести деятельность ни в одной сфере жизнедеятельности. Бюрократия является неодолимой

    Подробнее
  • Построение отчетов с диалоговыми формами

    26 апреля 2021 г.

    В предыдущих статьях по образовательной программе Академик мы научились устанавливать FastReport в Lazarus, освоили работу

    Подробнее

HTML 4.0 и CSS в отчёте – Легко! Обзор использования нового объекта отчета "HTMLView".

26 мая 2021 г.

 FastReport VCL + HTML   При огромном многообразии форматов документов, часто может возникнуть ситуация, когда заказчик хочет использовать в отчете уже готовые документы, а не тратить время на их верстку в отчете. Для таких случаев FastReport VCL предоставляет возможность использовать RichText или HTML теги в объекте текст, но иногда этого недостаточно.

С версии FastReport VCL 2021.2 расширяется набор инструментов для форматирования текста.

Новый объект HTMLView позволяет загружать HTML4 с CSS стилями и использовать его в отчете вместе с выражениями, привязкой к полям данных и другими мощными возможностями FastReport VCL.

Рассмотрим поэтапно, как же подключить "HTMLView" к отчету. Прежде всего, нужно добавить пакет с объектом в приложение. Для этого достаточно положить на форму объект "TfrxHTMLObject" или модуль frxHTML в uses приложения.

Теперь объект зарегистрирован и его можно использовать из Run-time дизайнера.

Запустим дизайнер. Прежде всего нужно определится с данными. В данном примере будем использовать таблицу Biolife из стандартной базы данных (Main Demo). Отчет будет выводить данные о рыбах с их изображениями.

Подключаем данные

Connect to Data

На созданный бэнд данных теперь можно разместить объект "HTMLView" из набора палитры объектов.

Create HTML Object

Для данного примера HTML текст был заготовлен заранее и вставлен через буфер обмена. HTML текст также можно загрузить из файла. Код должен содержать только HTML4.0 и CSS (JavaScript и другие Web расширения не поддерживаются).

Для наилучшего расположения данных в HTML коде используется таблица, внутри которой будут выводится поля данных.

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>
 

Чтобы соединить полученный HTML код с данными, можно воспользоваться вставкой выражений из редактора объекта.

HTML expressions editor

Поле с изображениями будет автоматически преобразовано в base64 с mime-type изображения, которое хранится в поле данных. FastReport VCL сделает все автоматически.
Как и "RichText" объект, "HTMView" поддерживает рост в высоту (растягивание) относительно его содержимого. И, конечно, объект "HTMLView" поддерживает разрыв данных, когда для вывода объекта недостаточно данных на странице. Растягивание и разрыв включается так же, как и для других объектов FastReport VCL. Сначала у объекта бэнд нужно установить свойства Stretched и AllowSplit. После, самому объекту "HTMLView" нужно выбрать StretchMode, в данном случае smActualHeight.

Set StrechMode

Все! Можно запустить отчет на исполнение и посмотреть на результат.

Preview Report

Как видно, FastReport VCL 2021.2 позволяет с легкостью встраивать и использовать HTML4.0 с CSS в отчет и связывать его с данными. 

О продукте Скачать Купить
avatar
Den Zubov
VCL разработка
Fast Reports Team: Den Zubov - VCL Development at Fast Reports
VCL FastReport Data Source HTML CSS HTMLView

Добавить комментарий
logo
  • +7(800)551-75-80
  • info@fastreport.ru
  • Ростов-на-Дону, Россия, 344082, ул.Обороны 24, офис 311
  • Купить
  • Загрузить
  • Документация
  • Отзывы
  • Как деинсталировать
  • Онлайн поддержка
  • FAQ
  • Видео уроки
  • Форум
  • Статьи
  • Наши Новости
  • Пресса о нас
  • Реселлеры
  • ВУЗам
  • Карьера
  • Контакты

© 1998-2022 ООО «Фаст Репортс»

  • Согласие с обработкой персональных данных
  • Не является публичной офертой