三分钟在在纯 JavaScript 应用中实现数据透视报表创建纯 JavaScript 应用使用任意工具创建 HTML

创建纯 JavaScript 应用使用任意工具创建 HTML页面。您可在任何文本编辑器中创建 HTML页面。输入以下代码：

<title>ARJS Report Viewer</title>
<meta name="description" content="ARJS Report viewer" />
<meta name="author" content="GrapeCity" />

2. 安装 ActivereportsJS 可直接从 CDN 和 NPM 引用 ActiveReportJS ，最简单的方法可直接引用 CDN 链接 head。 3. 添加报表 Viewer 宿主元素 body 标签中添加 div 元素

在 head 标签，添加 viewer-host 元素 #viewer-host { margin: 0 auto; width: 100%; height: 100vh; }

4. 初始化报表Viewer组件

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. 初始化报表Viewer组件将以下脚本添加到body标签中的viewer-host元素之后，以便该脚本在呈现该元素之后运行。此代码初始化报表 Viewer实例，并在页面中加载报表文件。

运行并测试应用程序您可以使用任何静态Web服务器来运行该应用程序。例如，http-server 包是全局安装的，则可以在应用程序的根文件夹中运行http-server命令来运行项目。确保您打开的地址为localhost（或127.0.0.1）上运行的应用程序。当应用程序启动时，ActiveReportsJS Viewer将出现在页面上。Viewer 将显示显示" Hello,ActiveReportsJS Viewer”文本的报表，您可以通过使用工具栏上的按钮或将报表导出为可用格式来测试基本功能。