日韩国产亚洲综合,夜干夜夜干,91视频青娱乐

純前端報(bào)表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用

轉(zhuǎn)帖|使用教程|編輯：莫成敏|2020-01-02 09:53:42.127|閱讀 1868 次

概述：在本篇文章中，您將學(xué)習(xí)如何快速使用這款報(bào)表工具，以及如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用中。

ActiveReportsJS是一款基于 HTML5的純前端報(bào)表控件，采用拖拽式報(bào)表開發(fā)模式，無需任何服務(wù)器和組件支持，即可在Mac、Linux 和 Windows 平臺(tái)中，輕松設(shè)計(jì)中國式復(fù)雜報(bào)表、類 Excel/Word報(bào)表、DashBoard儀表板等多種報(bào)表類型。除提供強(qiáng)大的報(bào)表設(shè)計(jì)能力之外，ActiveReportsJS還具備純前端報(bào)表展示、多數(shù)據(jù)源綁定、前端精準(zhǔn)打印/導(dǎo)出等功能，借助其靈活豐富的API ，可為您帶來無與倫比的報(bào)表開發(fā)體驗(yàn)。
在本篇文章中，您將學(xué)習(xí)如何快速使用這款報(bào)表工具，以及如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用中。
一、產(chǎn)品下載

首先，請(qǐng)?jiān)诖颂幭螺dActiveReportsJS。產(chǎn)品安裝包中含有Mac、Linux、Windows三個(gè)平臺(tái)的安裝程序，請(qǐng)根據(jù)您的使用平臺(tái)自行選擇。

點(diǎn)擊下載ActiveReportsJS正式版

下載后，請(qǐng)解壓文件，并雙擊 .dmg / .exe / .AppImage 程序，安裝報(bào)表設(shè)計(jì)器。
注：ActiveReportsJS 的安裝程序涵蓋：報(bào)表設(shè)計(jì)器、查看器和報(bào)表導(dǎo)出模塊。
二、創(chuàng)建一張JavaScript報(bào)表
從添加數(shù)據(jù)源到創(chuàng)建交互式報(bào)表，ActiveReportsJS簡單易用的設(shè)計(jì)器使您無需編寫代碼，僅需拖拽的方式，即可完成復(fù)雜報(bào)表設(shè)計(jì)。
如需創(chuàng)建報(bào)表，請(qǐng)?jiān)谥鞑藛螜谥羞x擇“文件”選項(xiàng)。“文件”面板打開后，您可選擇創(chuàng)建RDL報(bào)表或頁面報(bào)表。

RDL報(bào)表的主要使用場景是：報(bào)表模板可根據(jù)渲染區(qū)域的大小自適應(yīng)。
頁面報(bào)表則由布局驅(qū)動(dòng)，更適合嚴(yán)格的布局，以及限制并保持固定大小的報(bào)表模板。

純前端報(bào)表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用

添加數(shù)據(jù)源
ActiveReportsJS 支持的數(shù)據(jù)源類型是JSON，您可以直接使用 JSON Web Services 服務(wù)來連接 JSON數(shù)據(jù)源。

或者，您也通過本地的 JSON文件添加數(shù)據(jù)源。 -json文件必須與報(bào)表位于同一文件夾或子文件夾中，因?yàn)锳ctiveReportsJS只支持?jǐn)?shù)據(jù)文件的相對(duì)路徑。

此外，ActiveReportsJS還支持在單張報(bào)表中添加多個(gè)數(shù)據(jù)源。

第一步，單擊右上子菜單中的“數(shù)據(jù)綁定”圖標(biāo)，打開“數(shù)據(jù)綁定”面板。

純前端報(bào)表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用

單擊“數(shù)據(jù)源”下的“ +”按鈕，彈出以下對(duì)話框。

ActiveReportsJS支持以下數(shù)據(jù)源鏈接方式：

使用本地JSON文件
連接到報(bào)表服務(wù)器
使用連接字符串

如果您要使用本地JSON文件，請(qǐng)將“ 內(nèi)嵌”更改為true。然后，單擊“從文件加載”并選擇可用的JSON數(shù)據(jù)文件。

要連接到報(bào)表服務(wù)器（外部URL），請(qǐng)將服務(wù)器的URI復(fù)制地址拷貝到“內(nèi)容URL”中，如默認(rèn)生成的鏈接格式：

jsondoc=http:\/\/northwind.netcore.io\/customers?format=json

如果希望直接從本地?cái)?shù)據(jù)庫文件中加載，請(qǐng)點(diǎn)擊“外部文件或網(wǎng)址”, 通過“瀏覽”選擇可用的 JSON 文件，您也可以編輯自動(dòng)生成的連接字符串。如：

jsondoc=ProductInfo.json

完成數(shù)據(jù)源配置后，請(qǐng)單擊“添加數(shù)據(jù)源”完成此步驟。

第二步，創(chuàng)建數(shù)據(jù)集。（您可以通過點(diǎn)擊數(shù)據(jù)源旁邊的加號(hào)圖標(biāo)，從單個(gè)數(shù)據(jù)源中創(chuàng)建多個(gè)數(shù)據(jù)集）

數(shù)據(jù)集是獲取數(shù)據(jù)的最后一步，有了數(shù)據(jù)集，就可以訪問到具體的數(shù)據(jù)字段。要?jiǎng)?chuàng)建數(shù)據(jù)集，您需要構(gòu)造一個(gè)查詢字符串，該字符串返回所需的數(shù)據(jù)字段。

純前端報(bào)表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用

例如，以下查詢字符串將返回Products數(shù)組中的所有元素。

$.Products[*]

單擊“驗(yàn)證”按鈕，可以確保查詢字符串捕獲正確的字段。當(dāng)驗(yàn)證成功后，會(huì)生成可綁定的字段，您也可以在數(shù)據(jù)集上使用過濾器。

點(diǎn)擊確認(rèn)按鈕，數(shù)據(jù)集就添加成功了，此時(shí)，數(shù)據(jù)集下方會(huì)展示可用的字段名稱。

三、設(shè)計(jì)你的報(bào)表模板

設(shè)置好數(shù)據(jù)源和數(shù)據(jù)集后，就可以開始設(shè)計(jì)報(bào)表布局了。

ActiveReportsJS的設(shè)計(jì)器內(nèi)嵌了許多報(bào)表組件，在設(shè)計(jì)器左側(cè)的控制面板中展示了每個(gè)報(bào)表組件的圖標(biāo)。單擊“菜單”圖標(biāo)，可以展開左側(cè)控制面板。

報(bào)表組件包括表格、條形碼、圖像、目錄、圖表等。

在此示例中，我將添加一個(gè)表格（Table）組件，并展示一些數(shù)據(jù)。

添加表格（Table）組件
您可通過雙擊或拖動(dòng)組件來使用它。將表格（Table）組件拖拽到設(shè)計(jì)器布局中，默認(rèn)情況下表格顯示為3行3列，這三行內(nèi)容分別為：

表頭
表格內(nèi)容
表腳、頁腳

在“表格內(nèi)容”中，可以使用表達(dá)式綁定數(shù)據(jù)。您可根據(jù)運(yùn)行時(shí)數(shù)據(jù)集條目的數(shù)量，將其他行數(shù)據(jù)添加到此部分。

在報(bào)表設(shè)計(jì)時(shí)，您可以添加或刪除任意行列，也可以添加分組。

表格組件需要綁定數(shù)據(jù)字段來實(shí)現(xiàn)數(shù)據(jù)加載，您可以直接將字段列表中的某一字段拖拽到表格的單元格當(dāng)中，實(shí)現(xiàn)數(shù)據(jù)加載。

右鍵單擊表詳細(xì)信息行中的任何文本框（單元格），即可查看上下文菜單

當(dāng)您將鼠標(biāo)懸停在單元格時(shí)，單元格中會(huì)出現(xiàn)一個(gè)“字段選擇裝飾器”的選項(xiàng)，單擊它，就可以選擇要綁定到單元格的字段。
執(zhí)行了“字段選擇裝飾器”后，單元格將包含選定值的表達(dá)式。在“表格內(nèi)容”中選擇表達(dá)式也會(huì)將該字段綁定到整個(gè)列。若要在單元格中顯示其他數(shù)據(jù)，請(qǐng)?jiān)?“表格內(nèi)容”中添加更多表達(dá)式。

在本示例中，我選擇了以下字段，并刪除了表腳。如果從數(shù)據(jù)集中選擇一個(gè)字段，表格的表頭部分將會(huì)自動(dòng)填充。

如上圖，最后一列是產(chǎn)品的總價(jià)值（單價(jià)*庫存單位）。
此時(shí)，點(diǎn)擊預(yù)覽報(bào)表，將顯示如下結(jié)果：

當(dāng)然，您還可以利用報(bào)表組件的“樣式屬性”強(qiáng)化其可視化效果：

純前端報(bào)表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用

四、將ActiveReportsJS添加到您的應(yīng)用程序中
ActiveReportsJS通過查看器來呈現(xiàn)報(bào)表模板。只需幾行代碼，即可將ActiveReportsJS查看器輕松嵌入到Web應(yīng)用程序中。

您需要將ActiveReportsJS的配置文件引用到此應(yīng)用程序。

配置（Setup）

首先創(chuàng)建一個(gè)簡單的Web應(yīng)用程序，只需包含一個(gè)基本的HTML文件。例：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>ActiveReportsJS Demo</title>

        <meta name="description" content="Demo application of ActiveReportsJS Viewer and Report file">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="app.js"></script>

    </head>
    <body>

    </body>
</html>

在ActiveReportsJS的產(chǎn)品安裝包中，“dist” 文件夾中包含了我們需要添加到應(yīng)用程序中的JS和CSS文件。

將dist文件夾的全部內(nèi)容，復(fù)制到您的項(xiàng)目中：

ActiveReportsJS也可以通過NPM獲得，使用以下命令為基于Node的應(yīng)用程序安裝報(bào)表組件：

npm i @grapecity/activereports

現(xiàn)在，我們準(zhǔn)備在應(yīng)用程序中使用ActiveReportsJS。

使用報(bào)表組件

要在應(yīng)用程序中使用ActiveReportsJS，您需要在應(yīng)用程序中添加其對(duì)JS和CSS文件的引用。

這些引用文件位于vendor 文件夾中，如下所示：

<script src="vendor/dist/ie-polyfills.full.js"></script>
<script src="vendor/dist/ar-js-core.js"></script>
<script src="vendor/dist/ar-js-viewer.js"></script>
<script src="vendor/dist/ar-js-pdf.js"></script>
<script src="vendor/dist/ar-js-xlsx.js"></script>
<script src="vendor/dist/ar-js-html.js"></script>

<link rel="stylesheet" href="vendor/styles/ar-js-viewer.css">

配置報(bào)表查看器

添加引用后，便可以使用報(bào)表組件了。

將報(bào)表查看器的宿主元素添加到頁面主體部分，如下所示：

<body>
  <div id="viewer"></>
</body>

接下來，使用宿主元素的ID實(shí)例化報(bào)表查看器。

您也可以將其復(fù)制并寫入HTML的\標(biāo)記中。本示例，以下代碼位于app.js文件中。

document.readyState === 'complete' ? init() : window.onload = init;

function init() {
    const viewer = new ActiveReports.Viewer('#viewer');
    viewer.open("./reports/myReport.rdlx-json");
}

init函數(shù)的第一條語句用來創(chuàng)建報(bào)表查看器組件。

第二行是將報(bào)表加載到查看器中。為了加載報(bào)表，您還需要將其添加到應(yīng)用程序中。本示例，通過文件路徑顯示，報(bào)表位于reports文件夾中。

當(dāng)然，另一種更常見的方法是從報(bào)表服務(wù)器中，直接打開報(bào)表。在這種情況下，您需要將URL傳遞給viewer.open（）。例：

function init() {
    const viewer = new ActiveReports.Viewer('#viewer');
    viewer.open("http://myreportservice.com/reports/../..");
}

五、查看報(bào)表

現(xiàn)在，您的應(yīng)用程序已經(jīng)可以正常使用ActiveReportsJS了。

您可以通過 VSCode Live Server或適用于Chrome的Web服務(wù)器進(jìn)行預(yù)覽。

純前端報(bào)表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用

VSCode Live服務(wù)器集成了一個(gè)不錯(cuò)的功能：啟動(dòng)和停止服務(wù)器選項(xiàng)。

純前端報(bào)表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用

注：使用這些工具時(shí)，請(qǐng)確保其位于正確的文件夾中。

現(xiàn)在，我們就可以在瀏覽器中打開剛才配置的報(bào)表文件了。

純前端報(bào)表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用

ActiveReportsJS的基本使用方法就是這樣了，希望對(duì)您有所幫助哦。ActiveReportsJS還有更多創(chuàng)建或設(shè)計(jì)報(bào)表，敬請(qǐng)期待！您可以下載產(chǎn)品，親自體驗(yàn)產(chǎn)品的各種功能~

想要購買ActiveReportsJS正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇：跨平臺(tái)IDE集成開發(fā)環(huán)境Clion入門教程（二十八）：從命令行使用CLion功能下一篇：VDF常見問題整理（四十九）：VDF的鼠標(biāo)滾輪控制

相關(guān)產(chǎn)品

控件

產(chǎn)品功能：報(bào)表

源碼：非開源

產(chǎn)品編號(hào)：14197

當(dāng)前版本：v5.2 [銷售以商家最新版為準(zhǔn)，如需其他版本，請(qǐng)來電咨詢]

開發(fā) 商： GrapeCity

正式授權(quán)

">ActiveReportsJS

是一款基于 JavaScript 和 HTML5 的輕量級(jí)Web報(bào)表工具

最新文章 MORE

金喜正規(guī)買球相關(guān)的文章 MORE

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

純前端報(bào)表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用

用科技創(chuàng)就卓越

Create excellence with technology

欧美日韩亚-欧美日韩亚州在线-欧美日韩亚洲-欧美日韩亚洲第一区-欧美日韩亚洲二区在线-欧美日韩亚洲高清精品

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

純前端報(bào)表控件 ActiveReportsJS入門教程：如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用

為你推薦

用科技創(chuàng)就卓越

Create excellence with technology