Viewer集成

ActiveReportsJS是一款纯前端的报表控件，不仅可以在前端框架Vue、Angular、React中直接集成使用，还可以在纯 JavaScript 应用。

下面就一起来创建让ActiveReportsJS在纯JavaScript 应用

1、使用任意工具创建 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>

2、安装 ActivereportsJS

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

(在实际项目中，都是把JS和CSS文件都直接内置在项目中)

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

3、添加报表 Viewer 宿主元素

body 标签中添加 div 元素

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

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

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

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实例，并在页面中加载报表文件。

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

6、整个Html实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ActiveReportsJS sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/dist/ie-polyfills.js"></script>
    <script src="/dist/ar-js-core.js"></script>
    <script src="/dist/ar-js-designer.js"></script>
    <script src="/dist/ar-js-viewer.js"></script>
    <script src="/dist/ar-js-pdf.js"></script>
    <script src="/dist/designer/zh-locale.js"></script>

    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
          rel="stylesheet" />
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
          crossorigin="anonymous" />
    <link rel="stylesheet"
          type="text/css"
          href="/styles/ar-js-ui.css" />
    <link rel="stylesheet"
          type="text/css"
          href="/styles/ar-js-viewer.css" />
    <link rel="stylesheet"
          type="text/css"
          href="/styles/ar-js-designer.css" />
    <style>
        #viewer-host {
            margin: 0 auto;
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
  <body>
    <div id="viewer-host"></div>
    <script>    
      const viewer = new ActiveReports.Viewer("#viewer-host", { language: "zh" });
      viewer.open('reports/MonthSurvey.rdlx-json');
    </script>
  </body>
</html>

7、预览结果

8、demo实例下载

Viewer.rar

Page tree

Viewer集成

3、添加报表 Viewer 宿主元素