更新记录

1.0.0（2026-07-02）

初次上传，详情请见readme文档

平台兼容性

uni-app(4.44)

其他

g-documentEditing

基于 uni-app + Vue 3 的移动端 PDF 文档编辑组件，支持多文件合并预览、图形批注、OCR 文本批注、水印配置等功能。

功能特性

• 多 PDF 文件合并预览，支持滑动翻页
• 图形批注：画笔、形状（直线/矩形/椭圆/箭头等）、橡皮擦
• OCR 文本批注：可拖拽、双指缩放、双击编辑
• 水印配置：明码水印与暗码水印
• 文件目录切换，翻页自动同步激活状态
• IndexedDB 本地文件缓存与下载进度展示
• 搜索高亮与翻页自动搜索
• 横竖屏自适应渲染
• 批注数据导入/导出

依赖

• uni-icons
• uni-popup
• konva（图形批注渲染）
• pdf.js（PDF 渲染）

基本用法

<template>
  <g-documentEditing
    :files="fileList"
    :pdf-config="pdfConfig"
    :annots="annotations"
    :watermark="watermark"
    @annots="onSaveAnnots"
  />
</template>

<script setup>
import { ref } from 'vue'

const pdfConfig = ref({
  cMapUrl: '/src/static/pdfViewer/cmaps/',
  pdfPath: '/src/static/pdfViewer/pdf.mjs',
  workerSrc: '/src/static/pdfViewer/pdf.worker.mjs',
})

const fileList = ref([
  {
    fileId: '1',
    fileUrl: 'https://example.com/file1.pdf',
    fileName: '文件1.pdf',
  },
  {
    fileId: '2',
    fileUrl: 'https://example.com/file2.pdf',
    fileName: '文件2.pdf',
    readonly: true, // 只读模式
  },
])

const annotations = ref({})
const watermark = ref({
  plainContent: '内部文件请勿外传',
  color: '#e00f2d',
  fontSize: '12px',
  fontFamily: '微软雅黑',
  rotate: 45,
  width: '180px',
  height: '120px',
  transparency: '30',
})

function onSaveAnnots(annots) {
  console.log('保存批注数据', annots)
}
</script>

Props

files 文件项结构

watermark 水印配置

Events

批注数据结构

{
  "fileId1": {
    "1": [
      {
        "type": "ocr",
        "text": "批注文本",
        "color": "#333333",
        "x": 100,
        "y": 200,
        "fontSize": 16,
        "align": "left"
      }
    ],
    "2": [
      {
        "type": "tools",
        "shapeType": "zx",
        "startX": 10,
        "startY": 20,
        "endX": 100,
        "endY": 50,
        "color": "#ff0000",
        "lineWidth": 2
      }
    ]
  }
}

支持的批注类型

组件结构

g-documentEditing/
├── g-documentEditing.vue        # 主组件
├── components/
│   ├── pdfPreview.vue            # PDF 预览与批注渲染
│   ├── edit-tab.vue              # 底部编辑工具栏
│   └── tools.vue                 # 工具面板
├── annotation/
│   ├── AnnotationManager.js      # Konva 批注管理器
│   ├── AnnotationSerializer.js   # 批注序列化
│   ├── BaseTool.js               # 工具基类
│   └── tools/                    # 各类绘图工具
│       ├── PenTool.js
│       ├── ShapeTool.js
│       ├── EraserTool.js
│       └── EraserClickTool.js
├── utils/
│   ├── helper.js                 # 工具函数
│   ├── drawing.js                # 绘图原语
│   ├── pdfHelper.js              # PDF 加载辅助
│   └── IndexedDB.js              # 本地缓存
└── static/                       # 图标资源