本文主要介绍了如何在PureJS 框架中使用 ActiveReportsJS控件来创建 Web应用。
ActiveReportsJS 是一款基于 HTML5 的纯前端报表控件，采用拖拽式报表开发模式，无需任何服务器和组件支持，即可在 Mac、Linux 和 Windows 平台中，轻松设计中国式复杂报表、类 Excel/Word 报表、DashBoard 仪表板等多种报表类型。
ActiveReportsJS 完美继承了 .NET报表控件 ActiveReports 的报表设计能力和高效的报表开发引擎，并可深度集成并全面嵌入到 Node.js、Vue、Angular、React 等前端开发框架中。本文主要介绍了如何在PureJS 框架中使用 ActiveReportsJS控件来创建 Web应用。
ActiveReportsJS正式版
ExpressJS 应用程序
必备文件:
- Node.js
- Yarn
- Express 在命令行中输入以下命令进行安装
以下步骤创建 ExpressJS 应用程序。
1、在命令行中输入命令新建应用程序的目录, 输入
Mkdir arjs-js
2、将此目录设为工作目录
cd arjs-js
3、安装 Express
npm install express
或
yarn add express
4、安装 ActiveReportsJS包
npm install @grapecity/activereports
或
yarn add @grapecity/activereports
5、创建 ‘index.html’: 如果您只想实现简单的报表展示功能，可将报表放在 与index.html页面相近的文件夹下，示例如下：
<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> <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、通过添加 ‘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);
7、在命令控制台中，输入
node .server.js
8、打开浏览器输入 ‘localhost:8085’。运行程序就可看到效果
ASP.Net Web 应用
以下步骤创建 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 前引用，才能生效。
7、浏览器中查看 html 页面.
注意: *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>
本文内容到这里就结束了，感兴趣的朋友可以继续关注我们网，了解更多产品文章资讯~ActiveReportsJS入门教程持续更新中，敬请期待，您也可以下载ActiveReportsJS试用版免费评估~
相关内容推荐：
轻量级Web报表工具ActiveReportsJS入门教程：如何使用设计器创建报表
纯前端报表控件 ActiveReportsJS入门教程：如何将ActiveReportsJS的强大功能嵌入到Web应用
想要购买ActiveReportsJS正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！