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