纯JS集成报表系列教程5-Web端在线设计器集成

ActiveReportsJS拥有桌面端设计器和Web段在线设计器，现在我们来说说如何在纯 JavaScript 应用中集成前端报表设计器。

1、创建纯JS代码应用

示例代码如下：

`

`

2、安装 ActiveReportsJS

可通过 CDN或NPM 安装 ActiveReportsJS 脚本和样式，最简单的方法是通过在head标签直接引用CDN 的链接。

`

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-designer.css"

type="text/css"

/>

`

3、添加报表设计器的宿主元素

在body 标签中添加 div 元素。

在 head 标签中添加designer-host 元素

``

4、添加 ActiveReportsJS 报表

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、初始化设计器

在body 标签中 designer-host 元素后添加script 标签

`
`

6、预览展示

7、Web端报表设计器添加预览、保存功能

`

    


        

            PDF 预览

        

        

            打开设计器

        

    







  











    


        


            


                


                    打开报表

                

                

                    ×

                

            

            


                
请选择报表：

                


                

            

            


                

                    关闭

                

            

        

    

`
8、预览结果