[]
示例 参考文档 主题编辑器 API文档
立即试用
(Showing Draft Content)

在纯 JavaScript 应用中展示 ActiveReportsJS 报表

创建纯 JavaScript 应用

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

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

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

  <body></body>
</html>

安装 ActivereportsJS

可直接从 CDN 和 NPM 引用 ActiveReportJS ，最简单的方法可直接引用 CDN 链接 head。

<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.0.0/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-xlsx.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.0.0/dist/ar-js-html.js"></script>

添加报表 Viewer 宿主元素

body 标签中添加 div 元素

<div id="viewer-host"></div>

在 head 标签，添加 viewer-host 元素

<style>
  #viewer-host {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
  }
</style>

初始化 报表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"
      }
    ]
  }
}

初始化 报表Viewer组件

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

<script>
  var viewer = new ActiveReports.Viewer("#viewer-host");
  viewer.open("report.rdlx-json");
</script>

运行并测试应用程序

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

相关链接