国产美女流白浆,国产激情视频三区,国产原创小宝寻花

ActiveReportsJS入門教程：如何在PureJS 框架中使用 ActiveReportsJS創(chuàng)建 Web應(yīng)用

轉(zhuǎn)帖|使用教程|編輯：莫成敏|2020-02-27 11:05:12.980|閱讀 482 次

概述：本文主要介紹了如何在PureJS 框架中使用 ActiveReportsJS控件來(lái)創(chuàng)建 Web應(yīng)用。

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)用。

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

ExpressJS 應(yīng)用程序

必備文件:

Node.js
Yarn
Express 在命令行中輸入以下命令進(jìn)行安裝

以下步驟創(chuàng)建 ExpressJS 應(yīng)用程序。

1、在命令行中輸入命令新建應(yīng)用程序的目錄, 輸入

Mkdir arjs-js

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.js

8、打開瀏覽器輸入 'localhost:8085'。運(yùn)行程序就可看到效果
ASP.Net Web 應(yīng)用
以下步驟創(chuàng)建 ASP.NET Web 應(yīng)用程序

1、創(chuàng)建空的ASP.Net Web應(yīng)用程序。

2、項(xiàng)目中添加HTML頁(yè)面。

3、創(chuàng)建 'scripts' 文件夾，將以下文件拷貝到scripts 文件夾。

ar-js-core.js
ar-js-viewer.js

如果要添加導(dǎo)出功能，請(qǐng)?zhí)砑右韵履_本：

ar-js-pdf.js
ar-js-xlsx.js
ar-js-html.js

4、在根路徑下，創(chuàng)建 'css' 文件夾，將ar-js-viewer.css 文件拷貝進(jìn)去。

5、創(chuàng)建 'reports' 文件夾，用于存放報(bào)表文件。

6、修改已添加的HTML 頁(yè)面，如下

添加 viewer 必要的 scripts 文件和 css 文件,
添加 div 元素用于顯示 viewer,
初始化 viewer控件
使用 viewer.open() 方法打開報(bào)表.

具體代碼示例：

    <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è)面.

ActiveReportsJS入門教程：如何在PureJS 框架中使用 ActiveReportsJS創(chuàng)建 Web應(yīng)用

注意: *ar-js-core.js 腳本文件必須在 'ar-js-viewer.js' 腳本之前加載引用

*如果使用的是 IE 瀏覽器, 需要添加 ie-polyfills.full.js 腳本的引用，并添加到'ar-js-core.js' 和 'ar-js-viewer.js'文件前。

需要添加 .rdlx-json MIMEType 在 web配置文件中，代碼如下：

 <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)用

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