Syncfusion JavaScript PDF Viewer 技能用于在 TypeScript EJ2 项目中集成 Syncfusion PDF Viewer(PdfViewer),生成可复制粘贴的 TypeScript 与 HTML 代码,用于嵌入、配置和加载 PDF 文档。
适用对象与用途:该技能面向需要在 TypeScript EJ2 webpack 项目中嵌入 PDF 查看器的开发者。它生成原生 TypeScript 代码,使用 EJ2 的 PdfViewer 类,不生成 React、Vue 或 Angular 组件代码。
主要能力(依据参考资料中的参考文件)覆盖以下领域:
- 基础设置与配置:最小化 PdfViewer 配置、克隆快速启动项目、安装包、导入 CSS、创建实例并设置 documentPath 与 resourceUrl,并附加到 HTML 容器;配置宽度、高度、文档路径、locale、serviceUrl、AJAX 设置、滚动设置、命令管理器等通用属性;启用或禁用工具栏、注释、表单、导航、文本选择、下载、打印等功能。
- 导航与页面管理:页码导航(首页、末页、上一页、下一页、跳转指定页);书签/目录面板导航(需注入 BookmarkView 并设置 enableBookmark: true,书签 API 直接访问 pdfviewer 实例,如 pdfviewer.bookmark.openBookmarkPane());超链接导航与外部链接处理;缩略图面板导航。
- 查看与交互:缩放级别、缩放模式与放大控件(适合页面、适合宽度);选择模式与平移模式切换;文本选择、复制与相关事件;文本搜索功能与搜索结果导航。
- 工具栏与右键菜单:使用 toolbarSettings 配置工具栏可见性、提示行为、自定义或移除工具栏项;运行时通过 showToolbar() 等方法显示/隐藏工具栏、启用/禁用工具栏项;自定义右键菜单项并处理右键菜单事件。工具栏项名称必须严格依据 toolbar-settings.md 中的可用项列表,区分大小写,禁止猜测或推导名称。
- 注释:配置注释外观(颜色、透明度、样式)与行为;处理注释生命周期事件(添加、删除、移动、调整大小、选择、属性变更);自定义形状与测量注释标签;创建、配置并应用涂黑(redaction)注释以永久移除敏感内容。
- 表单:配置表单字段默认属性(文本、复选框、单选、下拉、签名等),使用 TextFieldSettings、CheckBoxFieldSettings、RadioButtonFieldSettings 等进行类型转换;表单字段边界使用大写属性(X、Y、Width、Height);处理表单字段交互事件(聚焦、失焦、值变更、校验)。添加表单字段必须在 documentLoad 事件回调内执行,否则会报 “formFieldCollections is not a function” 错误。
- 文档操作:启用/配置 PDF 下载及自定义文件名;配置与触发打印;页面重排、旋转、插入、删除、复制、导入与提取,支持合并 PDF。
- 高级功能:通过 API 编程控制加载文档、管理表单与注释、提取文本、撤销/重做、导航;完整的事件列表(文档加载、下载、注释、表单、搜索、导航等)。
使用方式:流程上先检测应用类型,通过 file_search 与 read_file 检查 package.json(是否含 @syncfusion/ej2-pdfviewer 或 @syncfusion/ej2 依赖)、tsconfig.json、webpack.config.js、src/index.ts 或 src/app.ts、src/index.html,确认为 TypeScript EJ2 webpack 项目后再生成代码。随后读取 references/*.md 参考文件,交叉核对每个 API、属性与方法。代码生成采用类式写法:从 @syncfusion/ej2-pdfviewer 导入 PdfViewer 及所需模块类,使用 PdfViewer.Inject(...) 注入所需功能模块,用 new PdfViewer({ ... }) 实例化并设置属性,通过 viewer.appendTo('#ElementId') 挂载到 DOM。参考文件路由以 getting-started.md 为起点,再合并匹配的功能锚点;若无关键字匹配,仅返回基础示例。部分操作必须在 documentLoad 回调内执行,如添加表单字段、添加注释、访问表单字段集合、访问文档元数据、修改依赖文档的属性;而设置 enableToolbar、enableAnnotation、宽度高度、配置 settings 对象等可在实例化时执行。
限制:技能严格限定只使用参考文件(Method Reference、Properties、Events 表格)中明确列出的 API 与属性;不生成自定义属性、不编造方法、不使用未文档化的变通方案、不假设未文档化行为。若请求的功能未列于任何参考文件,必须声明 “This feature is not supported in the current Syncfusion TypeScript PDF Viewer implementation.” 并列出实际支持的功能。若参考文件缺失或无法读取,则停止生成并提示确保 references/ 目录中包含所有参考文件。包名始终从 @syncfusion/ej2-pdfviewer 导入,禁止从 @syncfusion/ej2-typescript-pdfviewer 导入。
关于收费、价格、平台支持范围与运行效果等具体信息,资料中暂未提供。