关于javascript:一分钟创建一个Web-报表设计器

37次阅读

共计 1293 个字符，预计需要花费 4 分钟才能阅读完成。

创立纯 JS 代码利用

新建 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>

援用报表的 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>

HTML 页面中增加报表设计器的宿主元素
<div id="designer-host"></div>
在 head 标签中增加 designer-host 元素
<style>
#designer-host {
margin: 0 auto;
width: 100%;
height: 100vh;
}
</style>
** 增加 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"
      }
    ]
  }
}

初始化设计器
在 body 标签中 designer-host 元素后增加 script 标签

<script>
  var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
  designer.setReport({id: "report.rdlx", displayName: "my report"});
</script>