午夜福利理论片在线观看,日韩精品一国内自产一区二区,日本正能量不良网站

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

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

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

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

首先，請在此處下載ActiveReportsJS。產(chǎn)品安裝包中含有Mac、Linux、Windows三個平臺的安裝程序，請根據(jù)您的使用平臺自行選擇。

點擊下載ActiveReportsJS正式版

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jsondoc=ProductInfo.json

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

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

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

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

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

$.Products[*]

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

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

三、設(shè)計你的報表模板

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

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

報表組件包括表格、條形碼、圖像、目錄、圖表等。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

配置（Setup）

首先創(chuàng)建一個簡單的Web應(yīng)用程序，只需包含一個基本的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ù)制到您的項目中：

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

npm i @grapecity/activereports

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

使用報表組件

要在應(yīng)用程序中使用ActiveReportsJS，您需要在應(yīng)用程序中添加其對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">

配置報表查看器

添加引用后，便可以使用報表組件了。

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

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

接下來，使用宿主元素的ID實例化報表查看器。

您也可以將其復(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)建報表查看器組件。

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

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

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

五、查看報表

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

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

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

VSCode Live服務(wù)器集成了一個不錯的功能：啟動和停止服務(wù)器選項。

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

注：使用這些工具時，請確保其位于正確的文件夾中。

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

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

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

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

標(biāo)簽：

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

文章轉(zhuǎn)載自：

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

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

控件

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

源碼：非開源

產(chǎn)品編號：14197

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

開發(fā) 商： GrapeCity

正式授權(quán)

">ActiveReportsJS

是一款基于 JavaScript 和 HTML5 的輕量級Web報表工具

最新文章 MORE

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

老司机夜插-理伦理片-理伦片免费-理伦片免费观看-理伦片免费看-理伦日韩-理论福利片-理论片第一页-理论片电影-理论片理论

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

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

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

Create excellence with technology

老司机夜插-理伦理片-理伦片免费-理伦片免费观看-理伦片免费看-理伦日韩-理论福利片-理论片第一页-理论片电影-理论片理论

金喜正规买球

在線采購

中文文檔庫

試用/Demo下載

開發(fā)社群

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

為你推薦

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

Create excellence with technology