📄 Invoice OCR Extractor

Upload invoices, extract structured data with OCR + AI, export to Excel.

Demo · Setup · Architecture

📸 Screenshot

✨ About

A modern, single-file web tool paired with an n8n workflow for extracting structured data from invoice files (JPG, PNG, PDF). The web app uploads files to an n8n webhook, which performs OCR for images and direct text extraction for PDFs, then uses OpenAI to convert the raw text into clean JSON suitable for Excel export.

Features

• 📤 Multi-file upload — drag-and-drop or click to browse JPG, JPEG, PNG, PDF
• 🤖 Smart routing — images → OpenAI Vision OCR · PDFs → direct text extraction
• 📊 Live results table — sticky header, search across all columns, summary stats
• 📥 Excel export — download new .xlsx or append to an existing file
• 🌗 Dark / light mode — preference persisted in localStorage
• 🔐 Webhook URL saved — paste once, reused on every visit
• 🪟 Glassmorphism UI — modern dashboard, fully responsive

🧰 Tech Stack

Layer	Technology
Frontend	HTML5 · CSS3 · vanilla JavaScript
Excel I/O	SheetJS (CDN)
Workflow	n8n (self-hosted or cloud)
OCR / Extraction	OpenAI gpt-4o-mini (vision for images, text for PDFs)
PDF text	n8n built-in Extract from File node

🏗️ Architecture

┌─────────────────────────┐                ┌──────────────────────────────────────────────┐
│  Web Tool (index.html)  │                │              n8n Workflow                   │
│                         │                │                                              │
│  ┌───────────────────┐  │   POST files   │  Webhook ─► Split Files ─► Image or PDF?    │
│  │ Drag & drop zone  │──┼───────────────▶│                                    │   │     │
│  └───────────────────┘  │                │           ┌────────────────────────┘   │     │
│  ┌───────────────────┐  │                │           ▼ image                       ▼ pdf │
│  │ Results table     │◀─┼────JSON───────│  Build Image Req         Extract PDF Text     │
│  │ Summary stats     │  │                │           │                       │           │
│  │ Excel export      │  │                │           └─────► Merge ◀─────────┘           │
│  └───────────────────┘  │                │                     │                         │
└─────────────────────────┘                │     OpenAI Chat Completions (gpt-4o-mini)    │
                                            │                     │                         │
                                            │     Normalize JSON ─► Respond to Webhook     │
                                            └──────────────────────────────────────────────┘

📁 Project Structure

invoice-scanner/
├── index.html                              # Single-file web app (HTML + CSS + JS)
├── Invoice OCR Extractor Webhook.json      # Importable n8n workflow
├── data/
│   ├── generate_mock_invoices.py           # Script to generate test invoices
│   └── invoice-*.{pdf,png,jpg}             # 10 mock invoices (5 PDFs, 3 PNGs, 2 JPGs)
├── .env.example                            # Template for local secrets
├── .gitignore
├── screenshot.png
└── README.md

🚀 Getting Started

Prerequisites

• A modern browser (Chrome, Firefox, Safari, Edge)
• An n8n instance (self-hosted or cloud)
• An OpenAI API key

1. Clone the repository

git clone https://github.com/alfredang/invoice-scanner.git
cd invoice-scanner

2. Import the n8n workflow

1. In n8n, open the workflow menu (⋯) → Import from File
2. Select Invoice OCR Extractor Webhook.json
3. Open the OpenAI - Extract Invoice JSON node → replace YOUR_OPENAI_API_KEY in the Authorization header with Bearer sk-proj-...
4. Toggle the workflow to Active (top-right)
5. Copy the Production URL from the Webhook node

3. Run the web tool

Open index.html in your browser — no build step. For local dev with a server:

python3 -m http.server 8000
# then visit http://localhost:8000/index.html

4. Use the tool

1. Paste your n8n webhook URL into the n8n Webhook Configuration field → click Save
2. Drag invoices from data/ (or your own) into the upload zone
3. Click ⚡ Process Invoices
4. Review the extracted rows in the table → export to Excel

5. (Optional) Local secrets

Copy .env.example to .env and fill in your keys for safekeeping. The web tool does not read this file — the secrets live inside n8n.

cp .env.example .env

🌐 Deployment

This is a static site — deploy anywhere that serves HTML.

• GitHub Pages — auto-deployed via the included workflow at .github/workflows/deploy.yml
• Vercel / Netlify — drag the folder into the dashboard
• Cloudflare Pages — connect the repo, no build command needed

The n8n side runs wherever you host n8n (Docker, cloud, n8n.cloud, etc.).

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feat/your-feature)
3. Commit your changes
4. Open a Pull Request

👨‍💻 Developed By

Tertiary Infotech Academy Pte Ltd

🙏 Acknowledgements

• n8n for the workflow automation engine
• OpenAI for the vision + text extraction model
• SheetJS for Excel I/O in the browser

---

⭐ If this project helps you, please give it a star!