申报表设计器html,一分钟-创建一个Web 报表设计器

创建纯JS代码应用新建HTML 页面

ARJS Report designer

引用报表的js库

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"

/>

HTML 页面中添加报表设计器的宿主元素

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

#designer-host {

margin: 0 auto;

width: 100%;

height: 100vh;

}

**添加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 标签

var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host");

designer.setReport({id: "report.rdlx", displayName: "my report"});

运行并测试应用

使用浏览器打开 HTML页面来查看运行效果。