如何使用 ComPDF for Web 创建 Angular 应用

前提条件

要开始使用，您需要：

• 最新的稳定版本的 Node.js。
• 与 npm 兼容的包管理器（8.5.0 或更高版本）。
• 申请许可证密钥：联系 ComPDFKit 销售团队 获取免费的 30 天试用许可证。

创建新项目

1. 创建一个新的 Angular 项目：

npm init @angular compdfkit-app

当提示进行选择时，按 Enter 接受默认选项。

2. 切换到 compdfkit-app 目录：

cd compdfkit-app

添加 ComPDF for Web

1. 使用 npm 安装 webviewer 作为依赖：

npm i @compdfkit_pdf_sdk/webviewer --save

2. 将包含运行 ComPDFKit Web 演示所需的静态资源文件的 "webviewer" 文件夹添加到项目的公共资源文件夹中。您需要复制的文件夹是 node_modules/@compdfkit_pdf_sdk/webviewer/dist。

cp -a ./node_modules/@compdfkit_pdf_sdk/webviewer/dist/. ./src/webviewer

3. 将以下内容添加到您的 angular.json 文件中。Angular 会在运行应用程序之前将 ComPDFKit 库资产复制到资产目录中：

"assets": [
  // ...others
  "src/webviewer",
]

显示 PDF

1. 将您想要显示的 PDF 文档添加到 src/webviewer/example 目录中。您可以使用我们的演示文档作为示例。

2. 替换 app.component.html 的内容为：

<div #viewer class="viewer"></div>

3. 使用 Web SDK 时，您需要使用 path 参数来告诉它复制的静态资源的位置，否则它们将相对于当前路径。

替换 app.component.ts 的内容为：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { RouterOutlet } from '@angular/router';
// @ts-ignore
import WebViewer from '@compdfkit_pdf_sdk/webviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit{
  @ViewChild('viewer') viewer!: ElementRef;

  ngAfterViewInit(): void {
    let docViewer: any;
    WebViewer.init({
      path: '/',
      pdfUrl: '/webviewer/example/developer_guide_web.pdf',
      license: '<Input your license here>'
    }, this.viewer.nativeElement).then((instance: any) => {
      docViewer = instance.docViewer;

      docViewer.addEvent('documentloaded', async () => {
        console.log('document loaded');
      })
    })
  }
}

4. 将以下样式添加到 src/app/app.component.css 文件中：

.viewer { width: 100vw; height: 100vh; }

5. 启动应用程序，它将会在默认浏览器中打开：

npm start