一分钟-创建一个Web 报表设计器
Posted LanLan_Guo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一分钟-创建一个Web 报表设计器相关的知识，希望对你有一定的参考价值。
创建纯JS代码应用
- 新建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>- 引用报表的js库
<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>- HTML 页面中添加报表设计器的宿主元素
<div id="designer-host"></div>
在 head 标签中添加designer-host 元素
<style>
#designer-host {
margin: 0 auto;
width: 100%;
height: 100vh;
}
</style> - **添加JSON格式报表
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页面来查看运行效果。
以上是关于一分钟-创建一个Web 报表设计器的主要内容，如果未能解决你的问题，请参考以下文章