syncfusion-angular-pdf-viewer

Syncfusion Angular PDF Viewer UI 示例生成器

目标包：@syncfusion/ej2-angular-pdfviewer

强制执行的 3 步工作流（严格执行）

每个查询都必须依次遵循以下步骤：

STEP 1: Workspace Detection ? STEP 2: Read Reference File ? STEP 3: Generate Code

阻止规则

1. 在完成步骤 1 和 2 之前，不得生成代码
2. 不得做出假设——务必先验证工作区并阅读参考文件
3. 不得使用未记录的 API——只能使用参考文件中的 API

违反规则 = 停止并按正确流程重新开始

---

强制工作流

步骤 1：检测工作区 （必须首先执行）

执行以下工具：

1. file_search: **/{package.json,angular.json,tsconfig.json}
2. list_dir: src/app/
3. read_file: package.json (if exists)

向用户报告：

?? STEP 1 COMPLETE:
- Workspace: [Empty / Angular X.X project detected]
- Files found: [list]
- Decision: [Create new / Use existing]

步骤 2：阅读参考文件 （必须第二步执行）

执行以下步骤：

1. Match user query to Reference File Routing Guide below
2. Use read_file on: references\[filename].md
3. Extract ALL steps/APIs from reference file

向用户报告：

?? STEP 2 COMPLETE:
- Reference file: [filename.md]
- Steps found: [list sequential steps]
- APIs validated: [list properties/methods used]

步骤 3：生成代码 （仅在完成步骤 1 和 2 后执行）

验证清单：

• 每个 API 都与参考文件进行了交叉核对
• 未使用虚构或假定的属性
• 遵循 Angular 模式（组件绑定、生命周期钩子）
• 如果参考文件中没有某个 API？删除它

如果参考文件中没有所需功能：

? FEATURE NOT SUPPORTED
The requested [feature/API] is not documented.
Available alternatives: [list from reference files]

---

参考文件路由指南

核心设置

用户查询关键词	参考文件	用途
“basic”“create sample”“getting started”“load PDF”	getting-started.md	最简 PDFViewer 设置
“configuration”“server settings”“locale”	general-properties.md	查看器核心属性
“disable”“hide features”“enable/disable”“read-only”	enable-properties.md	功能开关

导航

用户查询关键词	参考文件	用途
“page navigation”“next/previous page”“go to page”	page-navigation.md	页面控件
“bookmarks”“table of contents”“TOC”“outline”	bookmark-navigation.md	书签导航（使用 ViewChild）
“hyperlinks”“external links”“URL navigation”	hyperlink-navigation.md	链接处理
“thumbnails”“preview pages”“thumbnail panel”	thumbnail-navigation.md	缩略图面板

查看与交互

用户查询关键词	参考文件	用途
“zoom”“magnification”“fit to page”“scale”	magnification.md	缩放控件
“text selection”“panning”“scroll mode”	interaction-mode.md	交互模式
“select text”“copy text”	text-selection.md	文本选择
“search”“find in PDF”“highlight search”	text-search.md	搜索功能

工具栏与上下文菜单

用户查询关键词	参考文件	用途
“customize toolbar”“hide toolbar items”“remove buttons”	toolbar-settings.md	工具栏配置
“show/hide toolbar dynamically”“toggle toolbar”	toolbar-methods.md	以编程方式控制工具栏
“right-click menu”“context menu”“custom menu”	contextmenu.md	上下文菜单

注释

用户查询关键词	参考文件	用途
"注释颜色", "注释样式", "自定义注释"	annotation-settings.md	注释外观
"注释事件", "添加注释时", "注释回调"	annotation-events.md	注释生命周期
"注释标签", "形状标签", "测量标签"	shape-label-settings.md	标签自定义
"墨迹注释", "手绘", "签名", "草图", "手写笔记"	ink-annotation.md	墨迹注释
"涂黑", "涂黑内容", "遮盖文本"	redaction-annotation.md	涂黑注释

表单

用户查询关键词	参考文件	用途
"表单字段默认值", "表单字段样式"	form-field-settings.md	表单字段配置
"表单字段事件", "字段更改", "验证"	form-field-events.md	表单字段事件

文档操作

用户查询关键词	参考文件	用途
"下载 PDF", "保存 PDF", "导出"	download.md	下载功能
"打印 PDF", "打印文档"	print.md	打印功能
"重新排序页面", "旋转页面", "添加/移除页面"	organize-pages.md	页面操作

高级

用户查询关键词	参考文件	用途
"以编程方式加载", "API 方法", "提取文本"	api-methods.md	编程控制
"事件列表", "所有事件", "事件参考"	events.md	完整事件列表

---

工具栏项目名称验证（关键）

生成工具栏配置时：

1. 务必先阅读 toolbar-settings.md
2. 仅使用以下部分中的名称：
   • “可用的主要工具栏项目”
   • “可用的注释工具栏项目”
   • “可用的表单设计器项目”
3. 必须逐字符验证——不得出现拼写错误

需要避免的常见错误：

• ? AnotatetionEditTool ? ? AnnotationEditTool
• ? CalibrationOption ? ? CalibrateTool
• ? ShapeAnnotationOption ? ? ShapeTool

---

快速入门示例

在 src/app/app.ts 文件的模板部分使用 <ejs-pdfviewer> 选择器添加 Angular PDF Viewer，以渲染 PDF Viewer 组件。

import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
         MagnificationService, ThumbnailViewService, ToolbarService,
         NavigationService, TextSearchService, TextSelectionService,
         PrintService, FormDesignerService, FormFieldsService,
         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                    [documentPath]='document'
                    [resourceUrl]='resource'
                    style="height:640px;display:block">
                </ejs-pdfviewer>
             </div>`,
  imports: [ PdfViewerModule ],
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               TextSearchService, TextSelectionService, PrintService,
               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = window.location.origin + "/assets/ej2-pdfviewer-lib";
  
  ngOnInit(): void {
  }
}

设置配置

规则 1：简单设置（1-3 个属性）? 内联

public annotationSelection = {
  selectionBorderColor: 'blue',
  resizerSize: 8
};

规则 2：复杂设置（4 个或更多属性，或枚举）? 导入枚举

import { AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-angular-pdfviewer';

public annotationSelection = {
  selectionBorderColor: '#0000ff',
  resizerSize: 8,
  resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
  resizerCursorType: CursorType.grab
};

---

协议违规处理

违规行为	修复方法
跳过步骤 1	重新执行：先使用 file_search 和 list_dir
跳过步骤 2	重新执行：对参考文件使用 read_file
使用未记录的 API	删除该 API，并在参考文件中查找替代方案
未报告发现	报告：“我检查了 X，发现 Y，现在执行 Z”

如果用户指出违规：立即承认并道歉，然后按照正确流程重新开始。

---

执行检查清单

生成代码前，请确认：

• 已执行步骤 1（工作区检测）并报告
• 已执行步骤 2（读取参考文件）并报告
• 每个 API 都已根据参考文件验证
• 未使用未记录的 API
• 遵循了 Angular 模式

参考文件是唯一事实来源——所有内容都必须能追溯到这些文件。