[]
本章主要介绍了如果在 Vue框架中集成 ActiveReportsJS 报表设计器,可以通过 在 Vue 框架中集成纯前端报表设计器中了解基本步骤
我们发布了ActiveReportsJS Vue 报表设计器所需的资源包通过 @grapecity/activereports-vue npm 包。@grapecity/activereports 主包,包含了基础的核心功能,如果您使用 Vue 2.0 使用ActiveReportsJS 的话需要安装 @vue/composition-api 包。
ActiveReportsJS Vue 设计器组件需要从 @grapecity/activereports-vue
包导入,并包含到父组件模板中,如:
import Vue from "vue";
import { Designer } from "@grapecity/activereports-vue";
new Vue({
el: "#app",
components: { "arjs-designer": Designer },
template: "<div style='width:100%;height: 100vh'><arjs-designer /></div>",
});
设计器组件包含以下属性:
属性 | 类型 | 描述 |
---|---|---|
hotkeysEnabled | boolean | 表示是否开启使用快捷键 |
language | string | 设置设计器语言。可查看 本地化 页面获取更多信息 |
fontSet | "default" | "registered" | "all" | 表示字体设置. 参考 字体配置教程。 |
dataSources | 数据源模板数组 | sets the Pre-defined data sources and data sets. |
reportList | 报表资源数组 | 设置 子报表的预置选项 |
imageList | 参考设置预置资源 预置资源文档 | |
onCreate | 为设计器增加新建 新建按钮 | |
onOpen | 为设计器增加 打开报表 | |
onRender | 为设计器增加 预览按钮 handler | |
onSave | 增加 保存报表 按钮 handler | |
onSaveAs | 增加 另存为按钮 handler | |
onOpenFileMenu | 增加 "文件" 菜单 handler | |
report | 在设计器中加载指定报表 |
除此之外,设计器组件也提供了 getReport
, setReport
, 及 processCommand
等 设计器类方法,可通过 ref
来引用设计器。如:
import Vue from "vue";
import { Designer } from "@grapecity/activereports-vue";
new Vue({
el: "#app",
components: { "arjs-designer": Designer },
template:
"<div style='width:100%;height: 100vh'><arjs-designer ref='reportDesigner' /></div>",
mounted: function () {
this.$refs.reportDesigner.setReport({id: "report.rdlx-json"})
},
});