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

Viewer集成

ActiveReportsJS是一款纯前端的报表控件，不仅能够在前端框架Vue、Angular、React中间接集成应用，还能够在纯 JavaScript 利用。

上面就一起来创立让ActiveReportsJS在纯JavaScript 利用

1、应用任意工具创立 HTML页面。您可在任何文本编辑器中创立 HTML页面。输出以下代码：
<!DOCTYPE html>

<head>

<meta charset="utf-8" /><title>ARJS Report Viewer</title><meta name="description" content="ARJS Report viewer" /><meta name="author" content="GrapeCity" />

</head>

</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"

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>

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

Viewer集成

3、增加报表 Viewer 宿主元素

4、初始化 报表Viewer组件

5、初始化 报表Viewer组件

6、整个Html实现代码

4、初始化报表Viewer组件

5、初始化报表Viewer组件