纯前端实现发票二维码批量识别——PDF.js + jsQR 实战
最近在做财务报销相关的需求，需要从大量电子发票 PDF 中提取发票号码、购买方、销售方、金额等信息。手动复制粘贴效率极低，于是研究了一下能不能纯前端实现自动识别。
折腾了几天，最终用PDF.js + jsQR + Tesseract.js实现了一个完全在浏览器端运行的发票批量识别工具，不需要后端，不上传文件，隐私安全。本文记录一下核心实现思路。
技术选型
| 功能 | 库 | 说明 |
|---|---|---|
| PDF 解析 | pdf.js | Mozilla 出品，浏览器端解析 PDF |
| 二维码识别 | jsQR | 纯 JS 二维码解码 |
| 图片 OCR | Tesseract.js | Google Tesseract 的 WebAssembly 版本 |
核心流程
1. PDF 文字层提取
电子发票 PDF 本身带有文字层，pdf.js 可以直接提取，不需要 OCR，准确率高：
async function extractPdfText(pdf) { let fullText = ''; for (let i = 1; i <= pdf.numPages; i++) { const page = await pdf.getPage(i); const textContent = await page.getTextContent(); // items.str 就是每个文字块的内容 const pageText = textContent.items.map(item => item.str).join(' '); fullText += pageText + '\n'; } return fullText; }
2. 扫描发票二维码
把 PDF 页面渲染到离屏 canvas，再用 jsQR 扫描像素数据：
async function scanPageForQR(pdf, pageNum, scale = 2.0) { const page = await pdf.getPage(pageNum); const viewport = page.getViewport({ scale }); const canvas = document.createElement('canvas'); canvas.width = viewport.width; canvas.height = viewport.height; const ctx = canvas.getContext('2d'); await page.render({ canvasContext: ctx, viewport }).promise; const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' }); return code ? code.data : null; }注意 scale 建议设 2.0 以上，分辨率太低二维码识别率会下降。
3. 解析二维码内容
增值税发票二维码格式是逗号分隔的字符串：
01,32,,26512000001023417645,38.69,20260317,,7147
字段顺序：版本, 类型码, 发票代码, 发票号码, 金额, 日期, 校验码
function parseInvoiceQR(qrText) { const parts = qrText.split(','); const invoiceTypeMap = { '01': '增值税专用发票', '04': '增值税普通发票', '32': '电子发票（普通发票）', // ... }; const typeCode = parts[1].trim(); return { invoiceType: invoiceTypeMap[typeCode] || typeCode, invoiceNumber: parts[3].trim(), invoiceDate: formatDate(parts[5].trim()), // 注意：parts[4]=金额，parts[5]=日期 amount: parts[4].trim(), }; }踩坑：不同版本发票二维码字段顺序不同，新版电子发票 parts[4] 是金额，parts[5] 才是日期，不要搞反。
4. 从 PDF 文本中提取结构化字段
这是最麻烦的部分。不同发票 PDF 的文本提取顺序差异很大：
- 新版电子发票：标签和值分离，"名称："标签在前半段，公司名在后半段
- 旧版专票：标签值紧邻，名称: XXX科技有限公司
- 部分发票：销售方在购买方前面出现（布局不同）
针对这些差异，我的处理策略：
// 优先匹配"名称: XXX公司"紧邻格式 const nameInline = [...t.matchAll( /名称[：:]\s*([\u4e00-\u9fa5（）()][^\d：:\n]{2,40}?(?:有限公司|股份公司|分公司|个体工商户|餐厅))/g )]; // 通过"购买方"/"销售方"标签位置判断顺序 const buyerLabelPos = t.search(/购\s*买\s*方/); const sellerLabelPos = t.search(/销\s*售\s*方/); const sellerFirst = buyerLabelPos > sellerLabelPos; // 旧版专票销售方在前 if (nameInline.length >= 2) { result.buyerName = sellerFirst ? nameInline[1][1] : nameInline[0][1]; result.sellerName = sellerFirst ? nameInline[0][1] : nameInline[1][1]; }税号同理，通过标签位置判断哪个是购买方哪个是销售方：
const taxRe = /\b([0-9A-Z]{15,20})\b/g; const taxes = [...t.matchAll(taxRe)]; if (buyerPos > sellerPos) { // 销售方先出现 result.sellerTaxId = taxes[0][1]; result.buyerTaxId = taxes[1][1]; } else { result.buyerTaxId = taxes[0][1]; result.sellerTaxId = taxes[1][1]; }5. 图片发票走 OCR
图片发票没有文字层，用 Tesseract.js 识别：
const worker = await Tesseract.createWorker('chi_sim+eng', 1, {}); const { data: { text } } = await worker.recognize(canvas); await worker.terminate();OCR 识别出来的文本每个字之间有空格，所以正则要先 text.replace(/\s+/g, '') 去掉所有空白再匹配。
批量处理
核心是维护一个文件队列，逐一处理：
async function startBatchScan() { const pending = fileQueue.filter(q => q.status === 'pending'); for (let i = 0; i < pending.length; i++) { const item = pending[i]; item.status = 'processing'; try { const data = await processFile(item.file, item.type); item.status = 'done'; results.push({ fileName: item.file.name, data }); } catch (e) { item.status = 'error'; results.push({ fileName: item.file.name, error: e.message }); } renderResultTable(); // 每识别一张就更新表格 } }效果
实测下来，新版电子发票 PDF 识别准确率很高，发票号码、金额、购买方/销售方基本都能正确提取。图片识别因为 OCR 精度问题，税号偶尔会有字符识别错误。
识别结果支持导出 CSV，带 BOM 头，Excel 直接打开中文不乱码：
const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8' });总结
整个方案完全在浏览器端运行，核心依赖：
- pdf.js 解析 PDF 文字层和渲染页面
- jsQR 扫描二维码
- Tesseract.js 处理图片 OCR
最麻烦的是不同发票格式的兼容，需要针对各种布局写不同的正则策略。如果你也有类似需求，可以参考这个思路，或者直接用我做好的在线工具试试效果：发票批量识别工具。
如有问题欢迎评论区交流。