Vue集成报表系列教程10

Web端在线设计器

ActiveReportsJS包含两个设计器，桌面端设计器和web端设计器。在实际的报表系统中有报表编辑和创建的需求， 那么就可以根据自己的需求把web端在线设计器集成到报表系统中，实现报表的新增、编辑的需求。

下面我们就来讲解下，如何创建一个web端在线设计器

1、创建Vue引用

创建 Vue 应用的最简单的方法是使用Vue CLI

vue create -p default webonline

2、安装 ActiveReportsJS 相关文件

Web 报表设计器功能是放在@grapecity/activereports-vue NPM 包中，@grapecity/activereports npm 包中存放核心功能。在使用 ActiveReportsJS 时，可以执行以下命令来安装在应用根目录下：

npm install @grapecity/activereports-vue @grapecity/activereports

或者使用yarn命令

yarn add @grapecity/activereports-vue @grapecity/activereports

如果您使用的是 Vue 2.0, 需要安装@vue/composition-api 包：

npm install @vue/composition-api

或

yarn add @vue/composition-api

3、将 ActiveReportsJS报表添加到应用程序

ActiveReportsJS 使用 JSON格式和rdlx-json扩展用于报表模板文件。在应用程序的public文件夹下，创建名为report.rdlx-json的新文件，并在该文件中插入以下JSON内容。

{   "Name": "Report",   "Body": {     "ReportItems": [       {         "Type": "textbox",         "Name": "TextBox1",         "Value": "Hello, ActiveReportsJS Designer",         "Style": {           "FontSize": "18pt"         },         "Width": "8.5in",         "Height": "0.5in"       }     ]   } }

添加设计器宿主元素

打开 src\App.vue 文件，添加代码如下，单文件组件 调用 Vue 报表设计器来加载上一步骤创建的报表模板

<template>   <div id="designer-host">     <JSDesigner v-bind:report="{id: 'report.rdlx-json', displayName: 'my report' }"></JSDesigner>