V2
V2V1

与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导出保留在用户界面中。

相关链接