SCALE — Build Lab
機能パターン · REACT COMPONENT

領収書OCR(Tesseract.js)

CATEGORY機能パターン TYPEReact Component EFFORT120〜240分 DIFFICULTY
PRIMARY CODE
ts
import Tesseract from 'tesseract.js';

export async function ocrReceipt(file: File) {
  const { data: { text } } = await Tesseract.recognize(file, 'jpn', {
    logger: m => console.log(m.progress),
  });

  // 金額抽出
  const amountMatch = text.match(/¥?\s?([0-9,]+)\s?円?/g);
  const amounts = amountMatch?.map(m => parseInt(m.replace(/[¥,円\s]/g, ''), 10)) ?? [];
  const total = Math.max(...amounts);

  // 日付抽出
  const dateMatch = text.match(/20\d{2}[\/\-年]\s?\d{1,2}[\/\-月]\s?\d{1,2}/);

  return { rawText: text, total, date: dateMatch?.[0] };
}
DEPENDENCIES
tesseract.js
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • 任意のダッシュボードに組み込み

領収書OCR(Tesseract.js)

:LiTarget: 用途

スマホ撮影した領収書から金額・日付・店名を自動抽出。

:LiSparkle: 特徴

  • 日本語認識
  • 画像前処理
  • 金額正規表現抽出
  • 日付認識

:LiCode: コード(コピペ用)

import Tesseract from 'tesseract.js';

export async function ocrReceipt(file: File) {
  const { data: { text } } = await Tesseract.recognize(file, 'jpn', {
    logger: m => console.log(m.progress),
  });

  // 金額抽出
  const amountMatch = text.match(/¥?\s?([0-9,]+)\s??/g);
  const amounts = amountMatch?.map(m => parseInt(m.replace(/[¥,円\s]/g, ''), 10)) ?? [];
  const total = Math.max(...amounts);

  // 日付抽出
  const dateMatch = text.match(/20\d{2}[\/\-年]\s?\d{1,2}[\/\-月]\s?\d{1,2}/);

  return { rawText: text, total, date: dateMatch?.[0] };
}

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加