在Vue中集成ActiveReportsJS报表查看器
此页面提供了Vue的ActiveReportsJS报表查看器集成的详细概述。 您可以查看Get Started 教程，以获取有关将该包装程序集成到Vue应用程序的简明指南。
ActiveReportsJS Vue NPM软件包
我们通过@grapecity/activereports-vue npm软件包分发了包含ActiveReportsJS Report Viewer包装器Vue组件的库。 主要的 @grapecity/activereports 软件包提供了核心功能。 如果您使用的是Vue 2.0，则ActiveReportsJS还需要安装@vue/composition-api 软件包。
ActiveReportsJS Vue Viewer 组件
可以从@grapecity/activereports-vue 包中导入ActiveReportsJS Vue Viewer组件，并将其包含在父组件的模板中，例如：
import Vue from "vue";
import { Viewer as ReportViewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-viewer.css";
new Vue({
el: "#app",
components: { "arjs-viewer": ReportViewer },
template: "<div style='width:100%;height: 100vh'><arjs-viewer /></div>",
});
查看器组件接受以下属性。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| availableExports | Array of strings | 设置查看器UI中应该可用的导出列表。 有关更多信息，请参见导出 页面 | |
| mouseMode | 'Pan' | 'Selection' | 'Pan' | 设置查看器组件的鼠标模式 |
| renderMode | 'Galley' | 'Paginated' | 'Paginated' | 设置查看器组件的渲染模式 |
| viewMode | 'Continuous' | 'SinglePage' | 'Continuous' | 设置查看器组件的查看模式 |
| zoom | 'FitWidth' | 'FitPage' | number | 100 | 设置查看器组件的缩放模式 |
| fullscreen | boolean | false | 指示查看器组件是否应以全屏显示内容mode |
| toolbarVisible | boolean | true | 指示查看器组件的工具栏是否可见 |
| sidebarVisible | boolean | true | 指示Viewer组件的侧边栏是否可见 |
| panelsLayout | 'sidebar' | 'toolbar' | 'toolbar' | 指示“查看器”和“导出”功能在Viewer组件的UI中的位置 |
| parameterPanelLocation | 'default' | 'top' | 'bottom' | 'default' | 指示参数栏在Viewer组件的UI中的位置 |
| toolbarLayout | Object | 设置可用工具栏项目的列表。 有关更多信息，请参见自定义 页面 | |
| language | string | 设置用户界面的语言。 有关更多信息，请参见本地化 页面 | |
| exportsSettings | object | 设置导出设置。 有关更多信息，请检查导出设置 页面 | |
| report | Object | 将报表加载到Viewer组件中。 | |
| reportLoaded | (args: ReportLoadedEventArgs)=>void | 设置在加载报表但呈现之前发生的事件的处理程序started | |
| documentLoaded | (args: DocumentLoadedEventArgs)=>void | 设置报表呈现完成时发生的事件的处理程序 | |
| errorHandler | ()=> void | 设置如果报表呈现导致错误发生的事件的处理程序 |
您可以将这些输入属性绑定到动态值以完全覆盖查看器组件的默认UI，请查看自定义页面 以获取更多信息。
此外，父组件可以通过为Viewer组件创建ref并使用其Viewer函数来访问Report Viewer的方法和属性 例如：
import Vue from "vue";
import { Viewer as ReportViewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-viewer.css";
new Vue({
el: "#app",
components: { "arjs-viewer": ReportViewer },
template:
"<div style='width:100%;height: 100vh'><arjs-viewer ref='reportViewer' /></div>",
mounted: function () {
this.$refs.reportViewer.Viewer().toggleFullScreen();
},
});