在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();
  },
});

在Vue中集成ActiveReportsJS报表查看器

ActiveReportsJS Vue NPM软件包

ActiveReportsJS Vue Viewer 组件

相关链接