2026-07-10

发票批量识别工具 · 使用说明文档

版本：v5.0
运行环境：Tampermonkey / Violentmonkey 等浏览器脚本管理器
适用页面：任意网页（*://*/*）
依赖接口：阿里云市场 — 发票 OCR 识别 API

1. 功能概述

本脚本是一个独立运行于任意网页上的发票批量 OCR 识别工具，核心能力如下：

功能	说明
批量识别	支持一次拖入 / 选择多张图片或 PDF 文件，自动排队逐张识别
全字段检测	自动识别发票中的所有字段，无需预定义列名
明细从属关系	发票主体字段与发票明细（商品列表）以 `rowspan` 正确关联展示
动态列合并	每识别一张新发票，自动累积发现新列并扩展表格
去重机制	根据「发票代码 + 发票号码 + 开票日期」自动去重
多格式导出	一键复制为 HTML 表格或 CSV，可直接粘贴到 Excel
悬浮面板	页面右上角悬浮按钮，点击展开操作面板；按钮支持长按拖拽定位
本地持久化	AppCode 和按钮位置自动存储到 `localStorage`，刷新页面不丢失

2. 前置准备

2.1 获取 AppCode

脚本调用的是阿里云市场「发票 OCR」API，需要一个有效的 AppCode 进行鉴权。

获取步骤：

前往阿里云 API 市场搜索「发票 OCR」
购买或订阅相关服务（通常有免费额度）
在控制台 → 我的 API 中找到对应服务的 AppCode
复制 AppCode 备用

注意：AppCode 是唯一的鉴权凭证，请妥善保管，不要泄露给他人。

2.2 浏览器环境

Chrome / Edge / Firefox 等主流浏览器
已安装 Tampermonkey（或兼容的脚本管理器）
脚本管理器已授予 GM_xmlhttpRequest 跨域请求权限

3. 安装与启动

打开 Tampermonkey 管理面板
点击「新建脚本」或「+」
将完整脚本代码粘贴进编辑器
保存（Ctrl+S）
打开任意网页，页面右侧中部出现悬浮按钮即表示安装成功

4. 使用流程

┌─────────────────────────────────────────────────────────┐

│ 第一步：点击悬浮按钮，展开操作面板 │

│ ↓ │ │ 第二步：在 AppCode 输入框中粘贴你的 AppCode，点击保存 │

│ ↓ │ │ 第三步：将发票文件（图片/PDF）拖入虚线区域， │

│ 或点击「选择文件」按钮批量选取 │

│ ↓ │ │ 第四步：等待识别完成，表格自动展示结果 │

│ ↓ │ │ 第五步：点击「复制 HTML」或「复制 CSV」导出数据 │ └─────────────────────────────────────────────────────────┘

4.1 支持的文件格式

类型	扩展名
图片	`.jpg` `.jpeg` `.png` `.bmp` `.gif` `.webp`
文档	`.pdf` `.ofd`

脚本通过 MIME 类型和文件扩展名双重校验，仅接受上述格式。

4.2 识别流程

文件通过 FileReader 转为 Base64
调用 API 接口进行 OCR 识别
返回数据经过解析，分离为「主体字段」和「发票明细」
动态检测新列，追加到表头
渲染表格，自动滚动到底部
每张文件间隔 1 秒（DELAY_MS），防止 API 限流

5. 界面说明

5.1 悬浮按钮

位置：默认位于页面右侧垂直居中
拖拽：长按按钮 350ms 后进入拖拽模式（按钮变为半透明，手机端触发震动反馈）
点击：短按展开 / 收起操作面板
角标：右上角显示已识别发票数量

5.2 操作面板

面板从上到下依次包含以下区域：

┌──────────────────────────────────────────┐

│ ● 标题栏 Invoice OCR [×] │

├──────────────────────────────────────────┤

│ 状态提示区域（成功/失败/信息） │ ├──────────────────────────────────────────┤

│ AppCode 设置区 │ │ [ 输入框 ] [保存] [清除] │ ├──────────────────────────────────────────┤

│ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │

│ │ 📦 拖入发票文件，或点击选择 │ │

│ │ 支持 JPG / PNG / BMP / PDF │ │

│ │ [ 选择文件 ] │ │

│ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘ │├──────────────────────────────────────────┤

│ 处理进度条（识别中显示） │ ├──────────────────────────────────────────┤

│ 已收录 N 张 [复制HTML] [复制CSV] [清空]│

├──────────────────────────────────────────┤

│ ┌────────────────────────────────────┐ │

│ │ 识别结果表格 │ │

│ │ # │ 主体字段 … │ 发票明细 … │ │

│ │ 1 │ xxx │ xxx │ │

│ │ │ │ xxx │ │

│ └────────────────────────────────────┘ │ └──────────────────────────────────────────┘

5.3 表格结构

表格采用两层表头设计：

区域	说明
左侧固定区	序号 `#` + 发票主体字段（如发票代码、发票号码、开票日期、购方名称等），纵向合并 `rowspan`
右侧明细区	表头标注为「发票明细」，包含商品名称、数量、金额等明细字段
组分隔线	每张发票之间有一条金色分隔线，视觉区分不同发票
交替背景	奇偶发票组使用不同底色，提高可读性

6. 数据导出

6.1 复制 HTML

点击 「复制 HTML」 按钮
生成带样式的 <table> HTML 代码
直接粘贴到 Excel、Word、邮件等富文本编辑器中，保留表格格式
HTML 表格使用浅色主题（米白底 + 金色强调），适合打印

6.2 复制 CSV

点击 「复制 CSV」 按钮
生成带 BOM 头（\uFEFF）的标准 CSV 文本，确保 Excel 打开中文不乱码
字段使用双引号包裹，内部双引号自动转义
可直接粘贴到 Excel 或保存为 .csv 文件

6.3 清空数据

点击 「清空」 按钮
清除所有已识别的发票数据、列定义、队列状态
操作不可撤销

7. 技术架构

7.1 模块划分

脚本采用 IIFE 封装，内部分为以下功能模块：

章节	模块名	职责
§1	配置	API 地址、请求延迟、localStorage 键名、跳过字段列表
§2	状态	全局变量：发票数组、列定义、队列、计数器等
§3	工具函数	HTML 转义 `esc()`、Base64 前缀剥离 `stripPre()`
§4	AppCode 管理	读取 / 保存 / 更新 AppCode 状态（localStorage）
§5	API 调用	`callOCR()` — 发起 GM_xmlhttpRequest POST 请求
§6	数据处理	`addInvoice()` — 解析响应、分离主体/明细、去重、动态列检测
§7	批量队列	`enqueue()` / `next()` — 文件过滤入队、逐个处理、进度更新
§8	CSS 注入	`injectCSS()` — 生成并注入全部样式（暗色主题）
§9	UI 构建	`buildUI()` — 创建 DOM 元素、绑定事件
§10	表格渲染	`renderTable()` — 动态生成表头和表体 HTML
§11	复制功能	`copyHTML()` / `copyCSV()` / `clip()` — 导出与剪贴板操作
§12-16	面板/拖拽/进度/状态/初始化	面板定位、按钮拖拽、进度条、状态提示、页面就绪检测

7.2 数据结构

// 单张发票
{
  main: {
    "发票代码": "044001900111",
    "发票号码": "12345678",
    "开票日期": "2024年01月15日",
    "购买方名称": "...",
    "销售方名称": "...",
    // ... 动态字段
  },
  details: [
    {
      "货物或应税劳务名称": "办公用品",
      "数量": "2",
      "金额": "100.00"
    },
    // ... 多条明细
  ]
}

发票批量识别工具油猴脚本