# electron文件对比+ocr图像提取

**Repository Path**: JIJI258/electron_ocr

## Basic Information

- **Project Name**: electron文件对比+ocr图像提取
- **Description**: electron+ocr简易文件对比
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-30
- **Last Updated**: 2025-11-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文件预览与对比工具

一个基于 Electron + Vue 3 + TypeScript 开发的桌面应用程序，提供强大的文件预览和智能对比功能。

## ✨ 功能特性

### 📄 文件预览
- **Office 文档支持**
  - Word 文档 (.doc, .docx) - 完整内容预览
  - Excel 表格 (.xls, .xlsx) - 多工作表展示
  - PowerPoint (.ppt, .pptx) - 开发中

- **PDF 文档**
  - 多页预览（最多显示前 5 页）
  - 高质量渲染

- **文本文件**
  - 纯文本 (.txt)
  - Markdown (.md)
  - JSON 文件

- **图片文件**
  - 支持 PNG、JPG、JPEG、GIF、BMP、WEBP
  - **OCR 文字识别** - 自动识别图片中的文字内容（支持中英文）

### 🔍 文件对比
- **智能差异检测**
  - 逐行对比两个文件的内容
  - 高亮显示新增、删除、修改的内容
  - 显示差异数量和相似度统计

- **同步滚动**
  - 左右面板同步滚动，方便查看对应内容

- **多格式支持**
  - 文本文件直接对比
  - Word 文档提取文本后对比
  - **图片文件 OCR 识别后对比**

### 🎨 用户界面
- 现代化设计风格
- 渐变背景和毛玻璃效果
- 流畅的动画和过渡
- 响应式布局
- 自定义组件库实现

## 🛠️ 技术栈

- **框架**: Electron + Vue 3 + TypeScript
- **构建工具**: Electron Vite
- **核心库**:
  - `mammoth` - Word 文档处理
  - `xlsx` - Excel 表格处理
  - `pdfjs-dist` - PDF 渲染
  - `tesseract.js` - OCR 图像识别
  - `diff-match-patch` - 文件差异对比

## 📦 安装

### 环境要求
- Node.js >= 18.0.0
- npm >= 9.0.0

### 安装依赖

```bash
npm install
```

## 🚀 开发

### 启动开发服务器

```bash
npm run dev
```

### 类型检查

```bash
# 检查 Node 端类型
npm run typecheck:node

# 检查 Web 端类型
npm run typecheck:web

# 检查所有类型
npm run typecheck
```

### 代码格式化

```bash
npm run format
```

### 代码检查

```bash
npm run lint
```

## 📦 构建

### Windows

```bash
npm run build:win
```

### macOS

```bash
npm run build:mac
```

### Linux

```bash
npm run build:linux
```

### 仅构建（不打包）

```bash
npm run build:unpack
```

## 📖 使用说明

### 文件预览

1. 点击 **文件预览** 标签页
2. 点击或拖拽文件到上传区域
3. 系统会自动识别文件类型并显示预览内容
4. 对于图片文件，会自动进行 OCR 识别并显示文字内容

### 文件对比

1. 点击 **文件对比** 标签页
2. 分别上传两个文件（文件 A 和文件 B）
3. 系统会自动开始对比（或点击"开始对比"按钮）
4. 查看对比结果：
   - 绿色高亮：新增内容
   - 红色高亮：删除内容
   - 黄色高亮：修改内容
5. 滚动任意一侧面板，另一侧会自动同步滚动

### 支持的对比格式

- 文本文件 (.txt, .md, .json)
- Word 文档 (.doc, .docx)
- 图片文件（通过 OCR 识别后对比）

## ⚙️ 配置

### OCR 识别

- 首次使用 OCR 功能时，需要从 CDN 加载 Tesseract.js 库
- 识别语言包（中文+英文）会在首次使用时自动下载
- 需要网络连接才能使用 OCR 功能

### 窗口设置

默认窗口大小：1400x900
最小窗口大小：1200x700

可在 `src/main/index.ts` 中修改窗口配置。

## 🐛 故障排除

### OCR 识别失败

1. **检查网络连接** - OCR 需要从 CDN 加载库文件
2. **查看控制台** - 打开开发者工具（F12）查看详细错误信息
3. **清除缓存** - 删除 `node_modules/.vite` 文件夹后重新启动

### 文件预览失败

1. 确认文件格式是否支持
2. 检查文件是否损坏
3. 查看控制台错误信息

### 构建失败

1. 确保所有依赖已正确安装：`npm install`
2. 清除构建缓存：删除 `out` 和 `dist` 文件夹
3. 重新构建：`npm run build`

## 📝 开发建议

### 推荐 IDE 配置

- [VSCode](https://code.visualstudio.com/)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue 3 支持

### 项目结构

```
electron-app/
├── src/
│   ├── main/           # Electron 主进程
│   ├── preload/        # 预加载脚本
│   └── renderer/       # Vue 渲染进程
│       └── src/
│           ├── components/  # Vue 组件
│           │   ├── FileUpload.vue    # 文件上传组件
│           │   ├── FilePreview.vue   # 文件预览组件
│           │   └── FileCompare.vue   # 文件对比组件
│           ├── App.vue      # 主应用组件
│           └── main.ts      # 入口文件
├── build/              # 构建资源
├── out/                # 构建输出
└── package.json
```

## 🔄 更新日志

### v1.0.0
- ✅ 文件预览功能（Office、PDF、文本、图片）
- ✅ 文件对比功能（文本、Word、图片 OCR）
- ✅ OCR 图像文字识别
- ✅ 同步滚动功能
- ✅ 现代化 UI 设计

## 📄 许可证

MIT

## 👨‍💻 作者

吉吉

## 🙏 致谢

- [Electron](https://www.electronjs.org/)
- [Vue.js](https://vuejs.org/)
- [Electron Vite](https://github.com/alex8088/electron-vite)
- [Tesseract.js](https://tesseract.projectnaptha.com/)
- [Mammoth.js](https://github.com/mwilliamson/mammoth.js)
- [SheetJS](https://sheetjs.com/)