ComPDFKit WebViewer UI — 开源文档

ComPDFKit Web SDK 的开源 Vue 3 UI 层。在浏览器中查看、批注、编辑和签署 PDF 文档——完全可定制。

---

这是什么？

ComPDFKit WebViewer UI 是位于 ComPDFKit Web SDK Core 引擎之上的开源 UI 层。它基于 Vue 3、Pinia 和 Vite 构建，提供了一个完整、响应式、可定制的浏览器端 PDF 文档处理界面。

本仓库包含默认 UI 的全部源码。你可以定制、扩展它，或将其作为构建自有 PDF 查看器界面的参考。

集成方页面
  └─ webviewer.js（iframe 嵌入，packages/core/webviewer.js）
       └─ Webview Vue 应用（packages/webview）
            └─ Core 桥接层（packages/webview/src/core/）
                 └─ ComPDFKitViewer（packages/core）  ←  Web Worker + WASM

Core 引擎（@compdfkit/core）是闭源的 WASM 二进制文件。此处文档化的 UI 层（@compdfkit/webview）是开源的。

快速开始

pnpm install
pnpm dev            # 开发服务器，访问 http://localhost:3032

在你自己的页面中嵌入查看器：

import ComPDFKitViewer from '@compdfkit/core/webviewer';

ComPDFKitViewer.init(
  { path: '/lib', pdfUrl: '/files/sample.pdf', license: 'YOUR_LICENSE_KEY' },
  document.getElementById('viewer')
).then(instance => {
  const { UI, Core } = instance;

  UI.setLanguage('zh-CN');       // 本地化
  UI.setTheme('dark');           // 主题
  UI.disableElements(['printButton', 'downloadButton']); // 隐藏工具栏按钮
});

详见 快速开始。

指南

基础

• 快速开始 — 安装、开发、构建与嵌入。
• 架构 — 三层设计、启动流程、多实例。
• Core 桥接层 — 引擎之上的无状态 src/core/ 门面。
• 状态管理 — Pinia stores（viewer 与 document）。
• 组件 — Vue 组件树与关键区域。
• 辅助函数、Hooks 与常量 — 工具函数与注册表。

UI 定制

• UI 定制总览 — 所有 UI 定制主题的枢纽。
• 头部与工具栏 — setHeaderItems、setToolbarGroup、工具栏分组。
• 面板 — 左/右面板、addPanel、setPanels、getPanels。
• 显示/隐藏元素 — openElement、closeElement、disableElements、enableElements。
• 主题与样式 — setTheme、setCustomStyle。
• 本地化 — setLanguage、addLanguage、支持的语言。
• 自定义弹窗 — addCustomModal。
• 弹出菜单 — annotationPopup、textPopup、contentEditorPopup、cropPagePopup。

功能

• 工具 — 工具系统、setActiveTool、registerTool。
• 批注 — 创建、导入、导出批注。
• 表单 — AcroForm 字段与表单面板。
• 签名 — 电子签名与数字签名。
• 印章 — 标准、动态与自定义印章。
• 内容编辑 — 文本与图片内容编辑。
• 事件 — Core EventBus 与事件监听。

参考

• API 参考 — 完整的 instance.UI / instance.Core 接口。
• 部署 — 生产构建与发布产物结构。

仓库结构

packages/
├── core/        # 闭源引擎 → 构建到 webview/lib/
└── webview/     # 开源 UI 层（本文档）
    └── src/
        ├── apis/        # 公共 API 接口（约 67 个模块 → window.instance.UI）
        ├── api_helpers/ # API 工具（封装 store、弹窗 API）
        ├── core/        # 指向引擎的无状态桥接层（约 120 个模块）
        ├── components/  # Vue UI 组件（200+ 个 .vue 文件）
        ├── stores/      # Pinia stores（viewer、document）
        ├── helpers/     # 工具函数（设备检测、i18n、弹窗定位等）
        ├── hooks/       # Vue 组合式函数
        ├── constants/   # dataElements、toolNames、panel 注册表
        └── locales/     # i18n 翻译文件