一分钟-创建一个Web 报表设计器

Posted LanLan_Guo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一分钟-创建一个Web 报表设计器相关的知识,希望对你有一定的参考价值。

创建纯JS代码应用

  1. 新建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>
  1. 引用报表的js库
<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-designer.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-designer.js"></script>
  1. HTML 页面中添加报表设计器的宿主元素
    <div id="designer-host"></div>
    在 head 标签中添加designer-host 元素
    <style>
    #designer-host {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    }
    </style>
  2. **添加JSON格式报表
    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"
      }
    ]
  }
}
  1. 初始化设计器
    在body 标签中 designer-host 元素后添加script 标签
<script>
  var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
  designer.setReport({id: "report.rdlx", displayName: "my report"});
</script>
  1. 运行并测试应用
    使用浏览器打开 HTML页面来查看运行效果。

以上是关于一分钟-创建一个Web 报表设计器的主要内容,如果未能解决你的问题,请参考以下文章

AnyReport 报表设计器

寻找允许连接到 RESTful Web 服务的报表设计器 [关闭]

关于报表表头锁定问题

如何在 web 中嵌入 pentaho 报表设计器?

高效强大的报表工具

自己整理的Finereport报表制作详细过程