轉(zhuǎn)帖|使用教程|編輯:莫成敏|2020-02-27 11:05:12.980|閱讀 482 次
概述:本文主要介紹了如何在PureJS 框架中使用 ActiveReportsJS控件來(lái)創(chuàng)建 Web應(yīng)用。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
ActiveReportsJS 是一款基于 HTML5 的純前端報(bào)表控件,采用拖拽式報(bào)表開發(fā)模式,無(wú)需任何服務(wù)器和組件支持,即可在 Mac、Linux 和 Windows 平臺(tái)中,輕松設(shè)計(jì)中國(guó)式復(fù)雜報(bào)表、類 Excel/Word 報(bào)表、DashBoard 儀表板等多種報(bào)表類型。
ActiveReportsJS 完美繼承了 .NET報(bào)表控件 ActiveReports 的報(bào)表設(shè)計(jì)能力和高效的報(bào)表開發(fā)引擎,并可深度集成并全面嵌入到 Node.js、Vue、Angular、React 等前端開發(fā)框架中。本文主要介紹了如何在PureJS 框架中使用 ActiveReportsJS控件來(lái)創(chuàng)建 Web應(yīng)用。
ExpressJS 應(yīng)用程序
必備文件:
以下步驟創(chuàng)建 ExpressJS 應(yīng)用程序。
1、在命令行中輸入命令新建應(yīng)用程序的目錄, 輸入
Mkdir arjs-js
2、將此目錄設(shè)為工作目錄
cd arjs-js
3、安裝 Express
npm install express
或
yarn add express
4、安裝 ActiveReportsJS包
npm install @grapecity/activereports
或
yarn add @grapecity/activereports
5、創(chuàng)建 'index.html': 如果您只想實(shí)現(xiàn)簡(jiǎn)單的報(bào)表展示功能,可將報(bào)表放在 與index.html頁(yè)面相近的文件夾下,示例如下:
<head> <title>ActiveReportsJS Viewer</title> <meta charset="utf-8" /> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" /> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ie-polyfills.full.js"></script> <!--to run application in IE--> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script> </head> <body onload="load()"> <div id="ARJSviewerDiv" style="height: 100%"></div> <script> function load() { const viewer = new ActiveReports.Viewer('#ARJSviewerDiv', { ShowAbout: true }); viewer.open('/reports/InvoiceList.rdlx-json'); } </script> </body>
如果您使用的是 返回的是 json 字串定義的報(bào)表,可以使用以下方式來(lái)查看報(bào)表:
<html> <head> <title>ActiveReportsJS Viewer</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/ar-js-viewer.css" /> <script type="text/javascript" src="scripts/ie-polyfills.js"></script> <!--to run in IE--> <script type="text/javascript" src="scripts/ar-js-core.js"></script> <script type="text/javascript" src="scripts/ar-js-viewer.js"></script> <script type="text/javascript" src="scripts/ar-js-pdf.js"></script> <script type="text/javascript" src="scripts/ar-js-xlsx.js"></script> <script type="text/javascript" src="scripts/ar-js-html.js"></script> </head> <body onload="load()"> <div id="ARJSviewerDiv" style="height: 600px"></div> <!--define container height--> <script> function load() { const viewer = new ActiveReports.Viewer('#ARJSviewerDiv'); viewer.open('/reports/InvoiceList.rdlx-json'); } </script> </body> </html>
6、通過(guò)添加 'server.js' 文件,創(chuàng)建 Web server,server.js 文件內(nèi)容包含如下:
const express = require('express'); //import Express.js module const app = express(); const path = require('path'); app.use(express.static(path.join(__dirname))); app.listen(8085);
7、在命令控制臺(tái)中,輸入
node .\server.js8、打開瀏覽器輸入 'localhost:8085'。運(yùn)行程序就可看到效果
1、創(chuàng)建空的ASP.Net Web應(yīng)用程序。
2、項(xiàng)目中添加HTML頁(yè)面。
3、創(chuàng)建 'scripts' 文件夾,將以下文件拷貝到scripts 文件夾。如果要添加導(dǎo)出功能,請(qǐng)?zhí)砑右韵履_本:
4、在根路徑下,創(chuàng)建 'css' 文件夾,將ar-js-viewer.css 文件拷貝進(jìn)去。
5、創(chuàng)建 'reports' 文件夾 ,用于存放報(bào)表文件。
6、修改已添加的HTML 頁(yè)面,如下
具體代碼示例:
<head> <title>ActiveReportsJS Viewer</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/ar-js-viewer.css" /> <script type="text/javascript" src="scripts/ie-polyfills.full.js"></script> <!--to run application in IE--> <script type="text/javascript" src="scripts/ar-js-core.js"></script> <script type="text/javascript" src="scripts/ar-js-viewer.js"></script> <script type="text/javascript" src="scripts/ar-js-pdf.js"></script> <script type="text/javascript" src="scripts/ar-js-xlsx.js"></script> <script type="text/javascript" src="scripts/ar-js-html.js"></script> </head> <body onload="load()"> <div id="ARJSviewerDiv" style="height: 100%"></div> <!--define container height--> <script> function load() { const viewer = new ActiveReports.Viewer('#ARJSviewerDiv', { ShowAbout: true }); viewer.open('/reports/InvoiceList.rdlx-json'); } </script> </body>
注意: ar-js-core.js 腳本必須在viewer scripts 前引用,才能生效。
7、瀏覽器中查看 html 頁(yè)面.
注意: *ar-js-core.js 腳本文件必須在 'ar-js-viewer.js' 腳本之前加載引用
*如果使用的是 IE 瀏覽器, 需要添加 ie-polyfills.full.js 腳本的引用,并添加到'ar-js-core.js' 和 'ar-js-viewer.js'文件前。
<system.webServer> <staticContent> <mimeMap fileExtension=".rdlx-json" mimeType="application/json" /> </staticContent> </system.webServer>
本文內(nèi)容到這里就結(jié)束了,感興趣的朋友可以繼續(xù)關(guān)注我們慧都網(wǎng),了解更多產(chǎn)品文章資訊~ActiveReportsJS入門教程持續(xù)更新中,敬請(qǐng)期待,您也可以下載ActiveReportsJS試用版免費(fèi)評(píng)估~
相關(guān)內(nèi)容推薦:
輕量級(jí)Web報(bào)表工具ActiveReportsJS入門教程:如何使用設(shè)計(jì)器創(chuàng)建報(bào)表
純前端報(bào)表控件 ActiveReportsJS入門教程:如何將ActiveReportsJS的強(qiáng)大功能嵌入到Web應(yīng)用
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自: