# pdf-web-annotator
**Repository Path**: jrcreat/pdf-web-annotator
## Basic Information
- **Project Name**: pdf-web-annotator
- **Description**: 一个基于Web的PDF标签工具,支持PDF文件上传、标签、导出和导入功能。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-17
- **Last Updated**: 2026-04-17
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# PDF标注工具
一个基于Web的PDF标注工具,支持PDF文件上传、标注、导出和导入功能。
> ⚠️ **注意:不会保存任何内容到服务器**
>
> 🔗 **在线试用:**
## 功能特点
- **PDF上传与预览**: 支持上传本地PDF文件并在线预览
- **文本标注**: 在PDF上添加文本注释
- **高亮标注**: 选择区域进行高亮标注,自动提取选中文字
- **标注移动**: 拖动标注到任意位置
- **标注编辑**: 双击标注可以修改内容
- **标注删除**: 点击删除按钮移除标注
- **标注导出**: 将标注数据导出为加密压缩文件
- **标注导入**: 导入之前导出的标注文件
- **快捷键支持**: 快速切换工具
## 快捷键
| 按键 | 功能 |
| -- | ----------- |
| S | 选择工具(可拖动标注) |
| H | 高亮工具 |
| T | 文本标注工具 |
## 使用方法
### 本地运行
```bash
# 进入项目目录
cd pdf-annotator
# 使用Python启动本地服务器
python -m http.server 8000
# 或使用Node.js
npm install
npm start
```
然后访问
### 标注流程
1. 点击"上传PDF"按钮选择本地PDF文件
2. 使用工具栏选择标注工具:
- **选择工具**: 拖动标注移动位置
- **高亮工具**: 选择区域进行高亮
- **文本标注**: 点击添加文字标注
3. 双击标注可以编辑内容
4. 点击标注右上角的×按钮删除标注
5. 点击"导出标注"保存标注数据(可选加密)
6. 下次打开PDF后,点击"导入标注"恢复标注
## 部署
### 部署到Zeabur
1. 将代码推送到GitHub仓库
2. 登录 [Zeabur](https://zeabur.com)
3. 创建新项目,选择从GitHub导入
4. Zeabur会自动检测并部署
### 部署到其他平台
支持任何支持Node.js或静态文件的平台:
- Vercel
- Netlify
- 阿里云ECS
- 腾讯云CVM
## 技术栈
- **前端**: HTML5 + CSS3 + JavaScript
- **PDF渲染**: PDF.js (Mozilla官方库)
- **压缩**: pako (gzip压缩)
- **加密**: Web Crypto API (AES-GCM)
- **服务器**: Node.js (Express风格)
## 项目结构
```
pdf-annotator/
├── index.html # 主页面
├── app.js # 核心JavaScript逻辑
├── server.js # Node.js服务器
├── package.json # 项目配置
└── README.md # 项目说明
```
## 安全特性
- 标注数据支持AES-GCM 256位加密
- 使用PBKDF2密钥派生(100000次迭代)
- 每次加密使用随机salt和IV
- 支持压缩导出,减小文件体积
## 浏览器兼容性
- Chrome (推荐)
- Firefox
- Safari
- Edge
## License
MIT