纯JS集成报表系列教程1

时间：2023-03-31 19:44:54 vue.js

Viewer集成ActiveReportsJS是一个纯前端报表控件，不仅可以直接集成使用在前端框架Vue、Angular、React中，也可以在纯JavaScript中应用.接下来，让我们用纯JavaScript创建ActiveReportsJS的应用程序1.使用任何工具创建HTML页面。您可以在任何文本编辑器中创建HTML页面。输入以下代码：ARJSReportViewer2.安装ActivereportsJS直接从CDN和NPM引用ActiveReportJS，最简单的方法就是直接引用CDN链接头。（在实际项目中，JS和CSS文件都直接内置到项目中）``3.添加报表查看器宿主元素正文标签添加div元素

4.初始化报??表查看器组件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.初始化报表Viewer组件在body标签中的viewer-host元素后添加如下脚本，使脚本在元素渲染完成后运行。此代码初始化报表查看器实例并在页面中加载报表文件。`6、整个Html现代码`

ActiveReportsJS示例

`7、预览结果