1、创建纯JS代码应用
示例代码如下:
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "utf-8" /> <title>ARJS Report designer</title> <meta name= "description" content= "ARJS Report designer" /> <meta name= "author" content= "GrapeCity" /> </head> <body></body> </html> |
2、安装 ActiveReportsJS
可通过 CDN或NPM 安装 ActiveReportsJS 脚本和样式,最简单的方法是通过在head
标签直接引用CDN 的链接。
3、添加报表设计器的宿主元素
在body
标签中添加 div
元素。
<div id= "designer-host" ></div> |
在 head
标签中添加designer-host
元素
<style> #designer-host {
margin: 0 auto; width: 100 %; height: 100vh; } </style> |
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" }, |