本帖最后由 Lenka.Guo 于 2020-11-17 17:23 编辑
创建纯JS代码应用示例代码如下： - <!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="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/styles/ar-js-ui.css" type="text/css"/><link rel="stylesheet" href="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/styles/ar-js-designer.css" type="text/css"/><script src="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/dist/ar-js-core.js"></script><script src="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/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>
初始化设计器 在body 标签中 designer-host 元素后添加script 标签 - <script>
- new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
- </script>
运行并测试应用 使用浏览器打开 HTML页面来查看运行效果。
| 
陕公网安备：61019002000258 |
隐私政策 |
网站地图