V2
V2V1

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

相关链接