锐客网

  1. 首页 > it技术 > >

纯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、预览结果
纯JS集成报表系列教程5-Web端在线设计器集成
文章图片

    推荐阅读


    上一篇：纯JS集成报表系列教程4

    下一篇：纯JS集成报表系列教程7-样式自定义