[]
示例 参考文档 主题编辑器 API文档
立即试用
(Showing Draft Content)

与Angular框架集成报表Viewer

本页详细介绍了ActiveReportsJS Report Viewer Wrapper for Angular。你可以查看 入门教程 教程，以获取有关将该包装程序集成到Angular应用程序中的简洁指南。

ActiveReportsJS Angular NPM软件包

我们通过[@ grapecity / activereports-angular]（https://www.npmjs.com/package/@grapecity/activereports-angular）npm软件包分发了包含ActiveReportsJS Report Viewer Wrapper for Angular组件的库。主要的 @grapecity/activereports 软件包提供了核心功能。

ActiveReportsJS Angular模块

用于Angular的ActiveReportsJS Report Viewer包装器位于ActiveReportsModule Angular模块中，因此应将其导入到应用程序的根模块或其他打算使用ActiveReportsJs Report Viewer的模块中，例如：

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@grapecity/activereports-angular";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

ActiveReportsJS Angular ViewerComponent

可以在HTML中使用gc-activereports-viewer标签引用ActiveReportsJS Angular ViewerComponent。 您可以使用ViewerComponent的以下输入属性来设置其外观。

属性

类型

默认值

描述

width

CSS Unit

'100%'

设置ViewerComponent的宽度

height

CSS Unit

'100%'

设置ViewerComponent的高度

language

string


设置ViewerComponent接口的语言。 查看 本地化 页面以获取更多信息

panelsLocation

'sidebar' | 'toolbar'

'sidebar'

设置搜索和导出UI的位置

exportsSettings

Object


设置导出设置。查看 导出设置 页面获取更多的信息

availableExports

Array of strings

[]

设设置对用户可用的导出过滤器列表。 查看 ActiveReportJS部分导出服务 了解更多信息

mouseMode

'Pan' | 'Selection'

Pan

设置ViewerComponent的鼠标模式。

renderMode

'Galley' | 'Paginated'

Paginated

设置ViewerComponent的渲染模式

viewMode

'Continuous' | 'SinglePage'

Continuous

设置显示报连续模式

zoom

'FitWidth' | 'FitPage' | number

100

设置显示页面的缩放级别

fullscreen

boolean

false

如果此属性设置为true，则ViewerComponent以全屏模式显示。

toolbarVisible

boolean

true

设置ViewerComponent工具栏的可见性

sidebarVisible

boolean

true

设置ViewerComponent侧边栏的可见性

errorHandler

function

null

如果ViewerComponent中发生错误，则调用的回调函数

您可以将这些输入属性绑定到动态值以完全覆盖查看器组件的默认UI， 查看 自定义页面 以获取更多信息。


除此之外,ViewerComponent开放以下输出属性：

事件

参数

描述

init


加载ViewerComponent时发生

reportLoaded

ReportLoadedEventArgs

在开始呈现之前在ViewerComponent中加载报表时发生

documentLoaded

DocumentLoadedEventArgs

报表加载完成时发生

最后, 父组件可以使用ViewChild注入来访问 ViewerComponent的方法和属性。

@ViewChild(ViewerComponent, , { static: false }) reportViewer: ViewerComponent;

ActiveReportJS 导出服务

ActiveReportJS Angular Module包含允许将报告导出为PDF，XLS或HTML格式的服务。 您必须将这些服务注入查看器的主机组件或其模块或应用程序的根模块中。 这是在根模块中注入导出服务的代码示例

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [    {
    provide: AR_EXPORTS,
    useClass: PdfExportService,
    multi: true
  },
  {
    provide: AR_EXPORTS,
    useClass: HtmlExportService,
    multi: true
  },
  {
    provide: AR_EXPORTS,
    useClass: XlsxExportService,
    multi: true
  }
],
  bootstrap: [AppComponent]
})
export class AppModule {}

同样，您可以使用ViewerComponent的availableExports输入属性来限制可用导出的列表。 也许对于某些报告，希望仅将PDF导出保留在用户界面中。

相关链接