在纯 JavaScript 应用中集成前端报表设计器

创建纯JS代码应用

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

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

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

  <body></body>
</html>

安装 ActivereportsJS

可通过 CDN或NPM 安装 ActiveReportsJS 脚本和样式，最简单的方法是通过在head标签直接引用CDN 的链接。

<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/5.2.3/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/5.2.3/styles/ar-js-designer.css"
  type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/5.2.3/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com.cn/activereportsjs/5.2.3/dist/zh-locale.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/5.2.3/dist/ar-js-designer.js"></script>

添加报表设计器的宿主元素

在body 标签中添加 div 元素。

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

在 head 标签中添加designer-host 元素

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

添加 ActiveReportsJS 报表

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"
      }
    ]
  }
}

初始化设计器

在body 标签中 designer-host 元素后添加script 标签

<script>
   var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer("#designer-host",{language: 'zh'});
    designer.setReport({ id: "report.rdlx-json", displayName: "my report" });
</script>

运行并测试应用

使用浏览器打开 HTML页面来查看运行效果。