V1
V1

ActiveReportsJS 与 PureJS 集成

本节我们主要介绍了如何在PureJS 框架中使用 ActiveReportsJS Viewer 控件来创建 Web应用。

ExpressJS 应用程序

必备文件:

  • Node.js
  • Yarn
  • Express 在命令行中输入以下命令进行安装

以下步骤创建 ExpressJS 应用程序。

  1. 在命令行中输入命令新建应用程序的目录, 输入
   Mkdir arjs-js
  1. 将此目录设为工作目录
   cd arjs-js
  1. 安装 Express
   npm install express

           或

   yarn add express
  1. 安装 ActiveReportsJS 包
   npm install @grapecity/activereports

            或

   yarn add @grapecity/activereports
  1. 创建 'index.html': 如果您只想实现简单的展示设计好的报表功能,可将报表放在与index.html页面与reports 文件夹同一目录下,示例如下:
   <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 字串定义的报表,可以使用以下方式来查看报表:

<html>
    <head>
        <meta charset="utf-8" />
        <title>ActiveReportsJS Viewer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <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.js"></script> <!--to run 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: 600px"></div>
        <script>
            function load() {
                const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
                viewer.open({
                    Type: 'report',
                    Body: {
                        Name: 'Body',
                        Type: 'section',
                        ReportItems: [
                            { Type: 'textbox', Name: 'textbox1', Value: 'Hello from ActiveReportsJS', Height: '10in' }
                        ]
                    },
                    Name: 'Report'
                });
            }
        </script>
    </body>
</html>
  1. 通过添加 'server.js' 文件,创建 Web server,server.js 文件内容包含如下:
   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);
  1. 在命令控制台中,输入
   node .\server.js
  1. 打开浏览器输入 'localhost:8085'
    运行程序就可看到效果

如何在 ASP.Net Web 应用集成 ActiveReportsJS

以下步骤创建 ASP.NET Web 应用程序

  1. 创建空的ASP.Net Web应用程序。

  2. 项目中添加HTML页面。

  3. 创建 'scripts' 文件夹,将以下文件拷贝到scripts 文件夹。

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

    如果要添加导出功能,请添加以下脚本:

    • ar-js-pdf.js
    • ar-js-xlsx.js
    • ar-js-html.js
  4. 在根路径下,创建 'css' 文件夹,将ar-js-viewer.css 文件拷贝进去。

  5. 创建 'reports' 文件夹 ,用于存放报表文件。

  6. 修改已添加的HTML 页面,如下

    • 添加 viewer 必要的 scripts 文件和 css 文件,
    • 添加 div 元素用于显示 viewer,
    • 初始化 viewer控件
    • 使用 viewer.open() 方法打开报表.

具体代码示例:

    <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 前引用,才能生效。

  1. 浏览器中查看 html 页面.

![Configure ARJS Viewer]预览

注意: *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>