创立纯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页面来查看运行成果。