纯JS综合报表系列教程5-Web端在线设计器集成

时间：2023-04-05 22:46:31 HTML5

ActiveReportsJS有桌面端设计器和网页端在线设计器。下面我们来谈谈如何在一个纯JavaScript应用中集成前端报表设计器。1、创建一个纯JS代码应用示例代码如下：`ARJSReportdesigner`2.安装ActiveReportsJS通过CDN或NPM安装ActiveReportsJS脚本和样式，最简单的方法是直接在head标签中引用CDN链接。``3.添加报表设计器的宿主元素在body标签中添加一个div元素。

在head标签`中添加designer-host元素`4。添加ActiveReportsJS报告ActiveReportsJS对报告模板文件使用JSON格式和rdlx-json扩展名。在应用程序的根目录下，创建一个名为report.rdlx-json的新文件并在该文件中插入以下JSON内容。`{"Name":"Report","Body":{"ReportItems":[{"Type":"textbox","Name":"TextBox1","Value":"Hello,ActiveReportsJSViewer","Style":{"FontSize":"18pt"},"Width":"8.5in","Height":"0.5in"}]}}`5.初始化设计器，在body标签中designer-host元素后添加脚本Tag``6.预览显示7.Web端报表设计器增加预览和保存功能`

ActiveReportsJS示例

PDF预览打开设计器

纯JS综合报表系列教程5-Web端在线设计器集成

请选择一个报告：