Using API Methods
Наши примеры проектов и шаблоны отчётов помогут Вам разобраться в основах работы с нашими продуктами.For finer control you can talk to the viewer directly through its API instead of only reacting to events.
Getting a reference. Use
Calling the API from the template. The
The API used here:
Because Angular's template binding re-reads these values on each change-detection cycle, the displayed zoom and page number stay in sync with what the user does in the viewer.
Getting a reference. Use
@ViewChild to obtain the StimulsoftViewerComponent instance:import { Component, ViewChild } from '@angular/core';
import { StimulsoftViewerComponent } from 'stimulsoft-viewer-angular';
export class AppComponent {
@ViewChild('viewer') viewer: StimulsoftViewerComponent;
}Calling the API from the template. The
viewer.api object exposes the viewer's state and methods, which you can bind to directly:Zoom is {{ viewer.api.zoom }}<br />
Current page {{ viewer.api.currentPage + 1 }}<br />
<input type="button" (click)="viewer.api.zoom = 50" value="Zoom to 50%" />
<input type="button" (click)="viewer.api.export('Pdf', { ImageResolution: 200 })" value="Export to PDF" />
<stimulsoft-viewer-angular #viewer
[requestUrl]="'/Viewer/{action}'" [action]="'InitViewer'" [height]="'100vh'">
</stimulsoft-viewer-angular>The API used here:
viewer.api.zoom— reads or sets the zoom level in percent; assigning50zooms the report to 50%.viewer.api.currentPage— the zero-based index of the current page (shown as+ 1for a human-friendly number).viewer.api.export('Pdf', { ImageResolution: 200 })— exports the report to a format with export settings; here PDF at 200 DPI.
Because Angular's template binding re-reads these values on each change-detection cycle, the displayed zoom and page number stay in sync with what the user does in the viewer.