在Vue框架中集成一个纯前端报表设计器

创建一个Vue应用程序。创建Vue应用最简单的方法是使用VueCLIvuecreate-pdefaultarjs-vue-designer-app安装ActiveReportsJS相关文件。Web报表设计器的功能是放在@grapecity/activereports-vuenpm包中，@grapecity/activereportsnpm包容纳了核心功能。使用ActiveReportsJS时，可以在应用根目录下执行以下命令安装：npminstall@grapecity/activereports-vue@grapecity/activereports或者使用yarn命令yarnadd@grapecity/activereports-vue@grapecity/activereports使用对于Vue2.0，需要安装@vue/composition-api包：npminstall@vue/composition-api或yarnadd@vue/composition-api添加ActiveReportsJS报告到应用程序ActiveReportsJS使用JSON格式和rdlx-json报告模板文档的扩展名。在应用程序的公共文件夹下，创建一个名为report.rdlx-json的新文件，并在该文件中插入以下JSON内容。{"Name":"Report","Body":{"ReportItems":[{"Type":"textbox","Name":"TextBox1","Value":"Hello,ActiveReportsJSDesigner","Style":{"FontSize":"18pt"},"Width":"8.5in","Height":"0.5in"}]}}添加设计器宿主元素打开src\App.vue文件，将代码添加为如下，单文件组件调用Vue报表设计器加载上一步创建的报表模板上面的代码是初始化报表设计器的例子。需要注意的是，宿主元素的ID必须可用才能运行项目。使用npmrunserve或yarnserve命令运行应用程序。ActiveReportsJS设计器控件会出现在页面上，你可以做一些基本的控件添加、修改、数据绑定等操作来测试设计器的功能。