JSViewer 集成到 Angular 应用
本帖最后由 Crystal.Li 于 2021-12-17 14:36 编辑本页介绍了如何在 Angular 应用程序中嵌入 JSViewer 组件。要运行 Angular 应用服务器，您将需要 node.js JavaScript 运行时和 Angular CLI。在终端或命令提示符中使用以下命令安装：npm install -g @angular/cli
1、创建一个 ASP.NET Core Angular 项目并在 ASP.NET Core Middleware 中配置 ActiveReports，如这篇博客：在 ASP.NET Core 中间件中配置 ActiveReports 现在为 Angular 应用程序配置客户端应用程序，如下面的步骤所示；
2、打开 CLientApp 文件夹；
3、打开 'package.json' 文件并在 'dependencies' 下为 JSViewer 添加以下包：
"@grapecity/ar-viewer": "latest",
4、打开 'angular.json' 文件，添加以下对JSViewer的css和js的引用：
"styles": ["./node_modules/@grapecity/ar-viewer/dist/jsViewer.min.css"],
"scripts": [ "./node_modules/@grapecity/ar-viewer/dist/jsViewer.min.js" ]
5、打开 ClientApp\src 文件夹内的 app 文件夹；
6、打开 'app.component.ts' 文件并将现有代码替换为以下代码，初始化 JSViewer 实例。此外，我们将在此文件中添加声明，因为它使用了 JSViewer 组件：
import { Component } from '@angular/core';
declare var GrapeCity: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
title = "app";
viewer: any;
ngAfterViewInit() {
this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
element: '#viewer-host',
});
this.viewer.openReport("DemoReport.rdlx");
}
}
7、打开“app.component.html”文件并将现有内容替换为以下用于托管元素的标记：
<body>
<div id="viewer-host"></div>
</body>
8、打开 ClientApp\src 文件夹中的“styles.css”并添加以下 css：
#viewer-host {
width: 100%;
height: 100vh;
}
9、打开 ClientApp\src 文件夹中的“main.ts”并添加 { ngZone: "noop" } 作为 bootstrapModule 方法中的第二个参数。如下所示：
platformBrowserDynamic(providers).bootstrapModule(AppModule, { ngZone: "noop" })
.catch(err => console.log(err));
10、在命令提示符或终端窗口中打开 ClientApp 文件夹，然后运行命令 npm install 来安装 npm 包；
11、按 F5 运行应用程序。
页:
[1]