国产日韩欧美在线一区,三级在线中文,91专区在线

報(bào)表生成器FastReport VCL中的HTML 4.0和CSS！審查新的“HTMLView”報(bào)告對(duì)象

翻譯|使用教程|編輯：楊鵬連|2021-05-31 10:41:46.463|閱讀 326 次

概述：讓我們運(yùn)行報(bào)表設(shè)計(jì)器。首先，我們必須選擇我們想要使用的數(shù)據(jù)。在本文中，我們將使用標(biāo)準(zhǔn)數(shù)據(jù)庫(kù) ( Main Demo ) 中的 Biolife表。該報(bào)告將輸出帶圖像的魚類數(shù)據(jù)。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

FastReport VCL是用于Delphi，C ++ Builder，RAD Studio和Lazarus的報(bào)告和文檔創(chuàng)建VCL庫(kù)。它提供了可視化模板設(shè)計(jì)器，可以訪問為30多種格式，并可以部署到云，網(wǎng)站，電子郵件和打印中。

近日，F(xiàn)astReport VCL更新至v6.9，在新版本中，在PDF更新中增加了對(duì)以下對(duì)象的并行表單支持：文本，替換和圖片。相互之間形式中。同時(shí)修復(fù)了多個(gè)Bug問題。歡迎下載體驗(yàn)。（旁邊向下按鈕下載）

立即點(diǎn)擊下載FastReport VCL v6.9最新版

對(duì)于種類繁多的文檔格式，當(dāng)客戶想要使用他們已有的某種文檔格式并且不想浪費(fèi)時(shí)間在報(bào)表中創(chuàng)建相同的布局時(shí)，通常會(huì)出現(xiàn)這種情況。對(duì)于這些情況，F(xiàn)astReport VCL 提供了在文本對(duì)象中使用 RichText 或 HTML 標(biāo)簽的能力，但有時(shí)這還不夠。

從FastReport VCL 2021.2 開始，我們擴(kuò)展了一組用于文本格式設(shè)置的工具。

新的 HTMLView 對(duì)象可以加載帶有 CSS 樣式的 HTML4，并將其與報(bào)表中的表達(dá)式、數(shù)據(jù)字段鏈接和 FastReport VCL 的其他強(qiáng)大功能一起使用。
讓我們逐步檢查如何在報(bào)告中使用“HTMLView”。首先，我們必須向應(yīng)用程序添加一個(gè)對(duì)象包。為此，我們只需要在應(yīng)用程序表單上放置“ TfrxHTMLObject”或?qū)rxHTML模塊添加到應(yīng)用程序的uses子句即可。

現(xiàn)在，當(dāng)對(duì)象注冊(cè)后，我們可以從運(yùn)行時(shí)報(bào)告設(shè)計(jì)器中使用它。

讓我們運(yùn)行報(bào)表設(shè)計(jì)器。首先，我們必須選擇我們想要使用的數(shù)據(jù)。在本文中，我們將使用標(biāo)準(zhǔn)數(shù)據(jù)庫(kù) ( Main Demo ) 中的 Biolife表。該報(bào)告將輸出帶圖像的魚類數(shù)據(jù)。

連接到數(shù)據(jù)集

現(xiàn)在我們可以將報(bào)表對(duì)象面板中的“ HTMLView ”放置在創(chuàng)建的數(shù)據(jù)帶上。

在我們的例子中，HTML 代碼是之前創(chuàng)建的，并通過剪貼板插入。也可以從文件加載 HTML 代碼。代碼應(yīng)僅包含 HTML4.0 和 CSS（不支持 JavaScript 和其他 Web 擴(kuò)展）。

為了在 HTML 代碼中實(shí)現(xiàn)數(shù)據(jù)的最佳布局，我們使用了一個(gè)包含我們需要的所有數(shù)據(jù)字段的表格。

<!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>

現(xiàn)在要將我們的 HTML 代碼與數(shù)據(jù)字段鏈接起來，只需使用帶有表達(dá)式編輯器的對(duì)象編輯器并插入數(shù)據(jù)表達(dá)式。

圖像數(shù)據(jù)字段將自動(dòng)編碼為 base64，并使用存儲(chǔ)在數(shù)據(jù)庫(kù)中的正確 mime 類型的圖像。FastReport VCL 將自動(dòng)執(zhí)行此操作。

“HTMView”對(duì)象支持相對(duì)于其中的內(nèi)容增長(zhǎng)到底部（拉伸），就像“RichText”對(duì)象一樣。當(dāng)然，當(dāng)報(bào)表頁面沒有足夠的可用空間時(shí)，“HTMLView”對(duì)象支持?jǐn)?shù)據(jù)拆分。可以像在 FastReport VCL 的其他報(bào)表對(duì)象中一樣激活數(shù)據(jù)拉伸和數(shù)據(jù)拆分。首先，我們需要設(shè)置樂隊(duì)的 Stretched 和 AllowSplit 屬性。然后在我們的例子中將“HTMLView”對(duì)象的 StretchMode 屬性設(shè)置為 smActualHeight。