乐趣区

关于报表:纯JS集成报表系列教程1

jiezi

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>

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、预览后果

退出移动版