.png){kind=link}
开发一个运行在浏览器中的多格式文件比对工具，支持 Excel、Word、PDF、文本文件、代码文件及配置文件的差异比对。用户在网页中选择两个文件后，应用在本地浏览器内完成解析、比对、可视化展示与统计报告生成。
本项目不包含后端服务：不上传文件、不依赖服务器存储与计算，部署形态为静态站点（HTML/CSS/JS）。
- 仅靠网页实现：解析、比对、渲染、导出均在浏览器侧完成
- 默认离线可用：页面加载后即可断网使用（可选 PWA 缓存）
- 隐私优先：不将文件内容发送到网络；历史记录与配置仅保存在本机浏览器存储
- 受浏览器限制：大文件受内存、线程与单页渲染性能影响，需要分块与渐进式展示
- 支持多种文件格式的统一比对体验
- 提供清晰的差异标记和直观的可视化展示
- 生成详细的比对统计报告
- 确保用户友好的交互界面
-
多格式文件上传
- 支持批量选择或拖拽上传
- 文件格式限制：.xlsx/.xls, .docx/.doc, .pdf, .txt, .json, .xml, .yaml, .yml, .js, .py, .java等
- 最大文件大小限制：50MB
- 不上传服务器：仅在浏览器内读取 File 对象
-
文件解析与内容提取
- Excel：解析工作表、单元格值/公式/格式（可配置是否比较格式）
- Word：提取段落文本、样式标记、表格数据（可配置是否比较格式/忽略图片）
- PDF：按页提取文本与位置信息，尽量保留段落与换行结构
- 文本/代码：保留原始格式、行号，支持语法高亮（可选）
- 结构化配置：JSON/YAML/XML 解析成对象后进行结构化比对（顺序无关）
-
智能比对引擎
- 文本内容比对（基于行/单词/字符）
- 结构化数据比对（Excel表格、Word表格）
- 格式差异检测（字体、颜色、样式等）
- 语义相似度分析（可选扩展）
-
差异可视化
- 并排对比视图
- 差异高亮显示（添加、删除、修改）
- 差异位置导航
- 代码文件的语法高亮（可选：highlight.js 或 Monaco Editor）
-
统计报告
- 差异数量统计
- 相似度百分比
- 修改类型分布
- 导出统计报告
- 比对历史记录
- 比对配置选项（忽略空格、大小写敏感等）
- 结果导出（HTML、文本；PDF 建议使用浏览器打印为 PDF）
- 书签和批注功能
├── src/
│ ├── components/
│ │ ├── FileUploader.vue # 文件上传组件
│ │ ├── FileComparator.vue # 主比对组件
│ │ ├── DiffViewer.vue # 差异展示组件
│ │ ├── StatsPanel.vue # 统计面板组件
│ │ └── NavigationBar.vue # 差异导航组件
│ ├── views/
│ │ ├── HomeView.vue # 主页
│ │ └── HistoryView.vue # 历史记录页
│ ├── utils/
│ │ ├── fileParser.js # 文件解析工具
│ │ ├── diffEngine.js # 比对算法
│ │ └── exportUtils.js # 导出工具
│ ├── store/
│ │ └── comparisonStore.js # 状态管理
│ ├── workers/
│ │ ├── parse.worker.js # 解析任务（可选：Web Worker）
│ │ └── diff.worker.js # 比对任务（可选：Web Worker）
│ └── assets/
│ └── styles/ # 样式文件
- 用户选择两个文件（File/Blob）
- 主线程做轻量校验（大小/扩展名/MIME）
- 解析与比对放入 Web Worker（大文件必选），主线程仅负责 UI 渲染与交互
- 比对结果采用分页/分段结构返回，支持渐进式渲染与导航
- 配置与历史记录存 IndexedDB（或 LocalStorage，视数据量而定）
- Vue 3 + Composition API
- Element Plus 或 Ant Design Vue：UI 组件库（二选一）
- xlsx：Excel 解析（读取工作表/单元格）
- mammoth：Word（docx）文本与结构提取（浏览器侧）
- pdfjs-dist：PDF 解析与文本提取（推荐 PDF.js 发行包）
- diff-match-patch 或 jsdiff：文本差异算法
- highlight.js 或 monaco-editor：代码展示与语法高亮（可选）
- js-yaml：YAML 解析（可选）
- fast-xml-parser：XML 解析（可选）
不需要也不引入 HTTP 请求库：默认无后端、无上传接口。
- 支持拖拽和点击上传
- 实时文件验证（格式、大小）
- 上传进度显示
- 已选文件预览和删除
补充建议：
- 使用
input[type=file]与拖拽的 DataTransfer 统一产出 File - 对大文件显示“读取/解析/比对”三段进度，而不是网络上传进度
{
files: [
{
id: 'uuid',
name: 'file1.xlsx',
type: 'excel',
size: 10240,
content: {}, // 解析后的内容
status: 'reading' // reading, parsed, error
}
],
comparison: {
status: 'idle', // idle, comparing, done, error
result: null,
config: {} // 比对配置
}
}-
数据提取
- 读取所有工作表
- 提取单元格数据（值、公式、格式）
- 识别合并单元格
- 保留行/列索引
- 大文件策略：按工作表分段解析，优先解析视口相关区域（可选增强）
-
数据结构化
{ sheets: [ { name: 'Sheet1', data: [[cell1, cell2, ...], ...], merges: [], dimensions: { rows: 100, cols: 26 } } ], metadata: { author, createdDate, ... } }
- 提取段落文本和样式
- 表格数据转换
- 图片占位符处理
- 列表和标题识别
- 文本内容提取（按页）
- 页面分割与页码映射
- 位置/字体等信息按需保留（用于更接近原排版的换行与段落）
- 表格识别（可选扩展，优先以文本为主）
- 默认按行保存原始文本与行号
- 可选“忽略行尾空格/忽略空行/统一换行符”为预处理步骤
-
文本比对
- 使用Myers差分算法
- 支持行级、单词级、字符级比对
- 考虑空格和换行符处理
-
表格比对
- 行列对齐算法
- 单元格内容对比
- 格式差异检测
-
配置文件比对
- 根据文件类型（JSON、YAML）进行结构化比对
- 键值对顺序无关比对
- 输出差异路径（如
a.b[2].c）用于导航与统计
interface DiffResult {
type: 'added' | 'deleted' | 'modified' | 'unchanged';
content: string;
position: {
line?: number;
row?: number;
col?: number;
page?: number;
};
details?: {
oldValue?: string;
newValue?: string;
formatChanges?: Array<{property: string, old: any, new: any}>;
};
}补充：为支持“渐进式渲染 + 导航”，推荐将结果组织为“文件级 -> 片段级 -> diff 条目”的树形结构，避免一次性把全量 diff 展示在 DOM 中。
- 左右面板同步滚动
- 差异高亮颜色编码
- 绿色：新增内容
- 红色：删除内容
- 黄色：修改内容
- 行号/单元格引用显示
- 大结果集渲染：虚拟列表/分段渲染，避免一次性渲染上万行
- 环形图：差异类型分布
- 数字卡片：关键统计数据
- 可展开的详细报告
- 差异列表快速跳转
- 上一处/下一处差异导航
- 书签功能
const comparisonConfig = {
// 通用配置
ignoreWhitespace: true,
caseSensitive: false,
ignoreEmptyLines: true,
// 文件类型特定配置
excel: {
ignoreFormatting: false,
compareFormulas: true,
sheetMatching: 'byName' // byName, byIndex
},
word: {
compareFormatting: true,
ignoreImages: true
},
code: {
syntaxAware: true,
ignoreComments: false,
tabSize: 4
}
};┌─────────────────────────────────────────────────────┐
│ Header：Logo、导航菜单、用户信息 │
├─────────────────────────────────────────────────────┤
│ │ │
│ │ 上传区域 │
│ │ ┌─────────────┐ ┌─────────────┐ │
│ │ │ 文件1上传 │ │ 文件2上传 │ │
│ │ └─────────────┘ └─────────────┘ │
│ │ │
│ │ 配置面板 │
│ │ [ ] 忽略空格 [ ] 忽略大小写 ... │
│ │ │
│ │ 比对按钮 │
│ │ [ 开始比对 ] │
│ │ │
│ 主 ────────────────────────────────────── │
│ │ │
│ 内 结果展示区 │
│ │ ┌─────────────────┬─────────────────┐ │
│ 容 │ 文件1内容 │ 文件2内容 │ │
│ 区 │ 差异高亮显示 │ 差异高亮显示 │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └─────────────────┴─────────────────┘ │
│ │ │
│ │ 统计面板（可折叠） │
│ │ ┌─────────────────────────────────────┐ │
│ │ │ 差异统计：添加X处，删除Y处... │ │
│ │ └─────────────────────────────────────┘ │
│ │ │
│ │ 操作工具栏 │
│ │ [导出] [下一处差异] [添加批注] ... │
│ │ │
└─────────────────────────────────────────────────────┘
- 桌面端：完整功能展示
- 平板端：自适应布局
- 移动端：单列视图，简化功能
- 分块读取和比对
- 虚拟滚动技术
- 懒加载差异内容
- Web Worker进行后台解析与比对（主线程保持交互流畅）
- 结果分页/分段：只在需要时生成与渲染对应片段
- 及时释放不再使用的文件内容
- 限制同时比对的文件大小
- 渐进式结果展示
- Worker 与主线程之间传输时，优先传结构化摘要或使用可转移对象（可选优化）
- 比对进度指示器
- 可中断的比对操作
- 本地缓存比对结果
- 快捷键支持
-
单元测试
- 文件解析函数
- 比对算法
- 工具函数
-
组件测试
- 上传组件功能
- 比对交互逻辑
- 差异显示正确性
-
集成测试
- 完整比对流程
- 多格式文件支持
- 错误处理
-
性能测试
- 大文件处理能力
- 内存使用情况
- 响应时间
- 各种格式的样本文件
- 包含不同类型差异的测试用例
- 边界情况测试文件
- 静态站点构建（建议使用 Vite 或同等工具链）
- 代码分割和懒加载（按格式解析器拆包）
- 静态资源优化（字体/高亮主题按需加载）
- 可选 PWA：离线缓存与版本更新策略（不影响“无后端”前提）
- 现代浏览器支持（Chrome 80+, Firefox 75+, Edge 80+）
- 渐进增强策略
- 降级方案（对于不支持的文件格式）
- 更多文件格式支持（PPT、图片OCR文本）
- 局域网点对点协同（WebRTC，可选扩展，仍不引入后端）
- 批量比对功能
- 插件系统
-
大文件处理性能
- 缓解：分块处理，进度反馈，超时设置
-
文件解析准确性
- 缓解：多解析库备选，手动解析选项
-
浏览器内存限制
- 缓解：文件大小限制，优化算法
- 文件处理在本地浏览器完成：不上传、不落盘（除非用户主动导出/保存）
- 隐私保护：历史记录与配置仅保存在本地浏览器存储，可提供“一键清除”能力
- 依赖安全：锁定依赖版本，避免引入会请求外网的资源（如在线高亮/字体）
- 防御型渲染：对导出 HTML 做内容转义，避免将文件内容当作可执行脚本插入页面