更新记录

1.0.0（2025-09-18）

1、首次上传

平台兼容性

其他

PDF 文档编辑器使用文档

项目概述

本项目是一个基于 uni-app 开发的 PDF 文档编辑器，支持在 H5 和 App 端使用。用户可以在线预览 PDF 文档，并进行文字标注、圈批注释、添加水印等操作。

功能特性

1. PDF 文档在线预览
2. 多种视图模式切换（单页、连续、缩略图）
3. 文字标注功能
4. 圈批注释功能
5. 添加水印功能
6. 跨平台支持（H5、App）

多端适配说明

H5 端适配

本项目在 H5 端使用了 PDF.js 库来渲染 PDF 文档，确保在各种浏览器中都能正常显示。

适配要点：

h5中不需要大大修改 直接将此项目核心文件拷贝到项目目录下即可 另外注意保存时的操作需要修改（本项目第一次开发实现，为适配本项目仅仅使用与webview的通信方式传递批注信息） 修改文件路径：pdfDocument\pages\documentEditing\components\pdfPreview.vue 位置在 75行 修改

App 端适配

App 端使用 uni-app 的原生渲染能力，提供更流畅的用户体验。

适配要点：

2. 手势操作：优化了触摸手势，支持移动端的圈批操作
3. 性能优化：针对移动端设备进行内存和渲染优化

使用方法

H5 端使用

1. 部署项目到服务器

2. 通过浏览器访问项目地址

3. 在地址栏添加参数访问指定 PDF 文件：

   App 端使用

4. 使用 HBuilderX 等工具导入项目

5. 配置 manifest.json 中的相关参数

6. 选择目标平台（Android/iOS）进行打包

7. 安装到设备上运行

页面说明

首页 (pages/index/index.vue)

• 项目入口页面
• 点击 "Hello" 文字进入 PDF 编辑页面
• 可以修改为实际的文档列表或其他业务逻辑

PDF 编辑页面 (pages/documentEditing/documentEditing.vue)

• 主要功能页面
• 集成 PDF 预览和编辑功能
• 支持多种编辑工具

功能组件：

1. PDF 预览组件 (components/pdfPreview.vue)

   • 使用 PDF.js 渲染 PDF 文档
   • 支持三种视图模式：
     • 单页视图 (dyst)
     • 连续视图 (lxst)
     • 缩略图视图 (slt)
   • 支持水印添加
   • 支持注释保存和加载

2. 编辑工具栏 (components/edit-tab.vue)

   • 提供多种编辑功能入口：
     • 文字标注 (ocr)
     • 圈批注释 (circleAnnotate)
     • 工具 (tools)
     • 视图切换 (preview)
     • 更多功能 (more)
   • 颜色选择器
   • 笔刷大小调节

3. 工具组件 (components/tools.vue)

   • 提供辅助工具功能

参数说明

PDF 编辑页面支持以下 URL 参数：

• file: PDF 文件地址（必填）
• fileName: 文件显示名称（可选）
• watermark: 水印配置（JSON 字符串，可选）

工具函数

水印生成 (utils/helper.js)

createWatermark(options) 函数用于生成水印覆盖层：

参数：

• content: 水印文字内容
• color: 水印颜色
• fontSize: 字体大小
• fontFamily: 字体族
• rotate: 旋转角度
• width: 水印宽度
• height: 水印高度

注意事项

1. PDF 文件需要支持跨域访问，或部署在同一域名下
2. 在 App 端使用时，需要配置相应的权限
3. 大文件操作时注意内存使用情况
4. 注释数据保存在内存中，页面刷新后会丢失

配置说明

manifest.json 配置要点

1. H5 配置：

json "h5": { "router": { "base": "", "mode": "history" } }

2. App 配置：

json "app-plus": { "usingComponents": true, "nvueStyleCompiler": "uni-app", "compilerVersion": 3 }

扩展开发

如需扩展功能，可以：

1. 在 edit-tab.vue 中添加新的工具选项
2. 在 pdfPreview.vue 中实现对应的处理逻辑
3. 使用 uni.postMessage 与原生应用通信（App 端）
4. 添加新的 PDF 操作功能

常见问题

1. PDF 加载失败

   • 检查文件地址是否正确
   • 确认文件是否支持跨域访问
   • 查看浏览器控制台错误信息

2. 注释无法保存

   • 确认是否调用了保存接口
   • 检查是否有足够的存储权限（App 端）

3. 水印不显示

   • 检查水印参数是否正确传递
   • 确认 DOM 是否正确添加了水印元素