纯JS集成报表系列教程5-Web端在线设计器集成
ActiveReportsJS拥有桌面端设计器和Web段在线设计器,现在我们来说说如何在纯 JavaScript 应用中集成前端报表设计器。
1、创建纯JS代码应用
示例代码如下:
`
ARJS Report designer - 锐客网
`
2、安装 ActiveReportsJS 可通过 CDN或NPM 安装 ActiveReportsJS 脚本和样式,最简单的方法是通过在head标签直接引用CDN 的链接。
` rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"
type="text/css"
/>
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-designer.css"
type="text/css"
/>
`
3、添加报表设计器的宿主元素 在body 标签中添加 div 元素。
【纯JS集成报表系列教程5-Web端在线设计器集成】在 head 标签中添加designer-host 元素
`
#designer-host {
margin: 0 auto;
width: 100%;
height: 100vh;
}
`
4、添加 ActiveReportsJS 报表 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"}]
}
}`
5、初始化设计器 在body 标签中 designer-host 元素后添加script 标签
`
`
6、预览展示 7、Web端报表设计器添加预览、保存功能 `
ActiveReportsJS sample - 锐客网 #designer-host, #viewer-host {margin: 0 auto;
width: 100%;
height: 500px;
}
打开报表请选择报表:
`
8、预览结果
文章图片
推荐阅读
- Activiti(一)SpringBoot2集成Activiti6
- 私有化轻量级持续集成部署方案--03-部署web服务(下)
- Spring集成|Spring集成 Mina
- 让我们回到纯真年代|让我们回到纯真年代,活着
- #20170613#-日课
- 杂阿含经638
- 《超时空同居》观影体验(笑或哭都很纯粹)
- Python机器学习基础与进阶|Python机器学习--集成学习算法--XGBoost算法
- SEL儿童情感训练是单纯的学科教育和知识灌输无法教给孩子的,也是我国教育体制中最为缺失的部分。
- 网络请求,如斯优雅