Because the viewer is a component, you can place several instances on one page. This example shows two independent viewers side by side.

Viewer setup. Configure the viewer, load the report, assign it to the component, and process the requests or events raised by the UI.
@Component({
    selector: "two-viewers",
    imports: [Viewer],
    template: `
        <sti-viewer [report]="report1" [options]="viewerOptions"></sti-viewer>
        <sti-viewer [report]="report2" [options]="viewerOptions"></sti-viewer>`
})
export class TwoViewers {
    report1 = new Stimulsoft.Report.StiReport();
    report2 = new Stimulsoft.Report.StiReport();
    viewerOptions = new Stimulsoft.Viewer.StiViewerOptions();
    constructor() {
        this.report1.loadFile("Reports/SimpleList.mrt");
        this.report2.loadFile("Reports/TwoSimpleLists.mrt");
        this.viewerOptions.height = "100vh";
    }
}
Each viewer holds its own report and options, so multiple previews coexist on one page without interfering — useful for dashboards or comparison views.

Используя этот сайт, вы соглашаетесь на использование файлов Cookie для аналитики и персонализированного контента. Файлы Cookie хранят полезную информацию на вашем компьютере, чтобы помочь нам повысить эффективность и удобство использования. Для получения дополнительной информации, пожалуйста, прочтите Конфиденциальность и Использование Cookie.