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 运行应用程序。

		自动登录	找回密码
密码			立即注册

[ActiveReports] JSViewer 集成到 Angular 应用

0 个回复

微信认证勋章

讲师达人

元老葡萄

悬赏达人