创建HTML 页面
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ARJS Report designer</title>
<meta name="description" content="ARJS Report designer" />
<meta name="author" content="GrapeCity" />
</head>
<body></body>
</html>
安装 ActiveReportsJS
可通过 CDN或NPM 安装 ActiveReportsJS 脚本和样式，最简单的方法是通过在head标签直接引用CDN 的链接。
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-designer.css"
type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-designer.js"></script>
添加报表设计器的宿主元素
在body 标签中添加 div 元素。
<div id="designer-host"></div>
在 head 标签中添加designer-host 元素
#designer-host{margin:0auto;width:100%;height:100vh; }
添加 ActiveReportsJS 报表
ActiveReportsJS 使用 JSON格式和rdlx-json扩展用于报表模板文件。在应用程序的根目录下，创建名为report.rdlx-json的新文件，并在该文件中插入以下JSON内容。
{"Name":"Report","Body": {"ReportItems": [ {"Type":"textbox","Name":"TextBox1","Value":"Hello, ActiveReportsJS Viewer","Style": {"FontSize":"18pt"},"Width":"8.5in","Height":"0.5in"} ] }}
初始化设计器
在body 标签中 designer-host 元素后添加script 标签
<script>
var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
designer.setReport({id: "report.rdlx", displayName: "my report"});
</script>
}
}
运行并测试应用
使用浏览器打开 HTML页面来查看运行效果。
