当前位置: 首页 > Web前端 > HTML5

三分钟在纯JavaScript应用中实现pivot报表

时间:2023-04-05 15:30:40 HTML5

1。创建纯JavaScript应用程序使用任何工具创建HTML页面。您可以在任何文本编辑器中创建HTML页面。输入以下代码:ARJSReportViewer2.安装ActivereportsJS直接从CDN和NPM引用ActiveReportJS,最简单的方法就是直接引用CDN链接头。3.添加reportViewerhost元素body标签在head标签中添加div元素

,添加viewer-host元素####4.初始化报??表查看器组件ActiveReportsJS报表模板文件使用JSON格式和rdlx-json扩展名在应用程序的根文件夹中,创建一个名为report.rdlx-json的文件,并插入将以下JSON内容放入文件中。添加脚本代码:{"Name":"Report","Body":{"ReportItems":[{"Type":"textbox","Name":"TextBox1","Value":"Hello,ActiveReportsJSViewer","样式":{"FontSize":"18pt"},"宽度":"8.5in","高度":"0.5in"}]}}5.初始化reportViewer组件并将以下脚本添加到body标记viewer-host元素,以便脚本在呈现该元素后运行。此代码初始化报表查看器实例并在页面中加载报表文件。6.运行和测试应用程序您可以使用任何静态Web服务器来运行应用程序。例如,如果全局安装了http-server包,则可以在应用程序的根文件夹中运行http-server命令来运行项目。确保打开在本地主机(或127.0.0.1)上运行的应用程序的地址。当应用程序启动时,ActiveReportsJSViewer将出现在页面上。查看器将显示显示文本“Hello,ActiveReportsJSViewer”的报告,您可以通过使用工具栏上的按钮或将报告导出为可用格式来测试基本功能。