ActiveReportsJS v2.0 beta 3- Web 设计器与 PureJS 集成
本帖最后由 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 的链接。<linkrel="stylesheet"href="http://cdn.grapecity.com/activereportsjs/2.0.0-beta/styles/ar-js-ui.css"type="text/css"/><linkrel="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页面来查看运行效果。
页:
[1]