[]
示例代码如下:
<!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>
可通过 CDN或NPM 安装 ActiveReportsJS 脚本和样式,最简单的方法是通过在head
标签直接引用CDN 的链接。
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-designer.css"
type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-designer.js"></script>
在body
标签中添加 div
元素。
<div id="designer-host"></div>
在 head
标签中添加designer-host
元素
<style>
#designer-host {
margin: 0 auto;
width: 100%;
height: 100vh;
}
</style>
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页面来查看运行效果。