纯JS集成报表系列教程1

Viewer集成

ActiveReportsJS是一款纯前端的报表控件，不仅可以在前端框架Vue、Angular、React中直接集成使用，还可以在纯 JavaScript 应用。

下面就一起来创建让ActiveReportsJS在纯JavaScript 应用

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

2、安装 ActivereportsJS
可直接从 CDN 和 NPM 引用 ActiveReportJS ，最简单的方法可直接引用 CDN 链接 head。

(在实际项目中，都是把JS和CSS文件都直接内置在项目中)
`

rel="stylesheet"

href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"

type="text/css"

/>

rel="stylesheet"

href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-viewer.css"

type="text/css"

/>

`

3、添加报表 Viewer 宿主元素

body 标签中添加 div 元素

"viewer-host">

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实例，并在页面中加载报表文件。
`

6、整个Html实现代码

`

`

7、预览结果