reader.eapp.vn · Web App · Data Viewer
eApp Reader — Universal Data Viewer
Đọc 80+ định dạng file trực tiếp trên trình duyệt — không cần upload server, dữ liệu được xử lý 100% phía client. Hỗ trợ CSV, Excel, JSON, PDF, SQLite, Parquet, Markdown và nhiều hơn nữa.
Web App80+ FormatsClient-sideNo Upload
Features
- Hỗ trợ 80+ định dạng: CSV, Excel, JSON, PDF, SQLite, Parquet, Markdown, XML...
- Xử lý hoàn toàn phía client — dữ liệu không rời máy người dùng
- Preview dữ liệu dạng bảng, text, hoặc raw bytes
- Tìm kiếm và lọc dữ liệu ngay trong trình duyệt
- Hỗ trợ file lớn với lazy loading
Stack & Tools
- Frontend: JavaScript · WebAssembly · Tailwind CSS
- Parsers: xlsx.js · pdf.js · sql.js · Papa Parse · và nhiều hơn
- Architecture: 100% client-side, không backend
- Hosting: Cloudflare Pages
Kiến trúc & Quy trình hoạt động
SPA tĩnh chạy 100% Client-Side. Ứng dụng tận dụng tối đa kiến trúc Web Workers để chạy các thư viện phân tích file nặng (như sql.js biên dịch từ C qua WebAssembly, parquet.js) trong luồng nền, ngăn việc đóng băng luồng chính xử lý UI.
User selects File
↳ HTML5 File API (Read as ArrayBuffer)
↳ Post Message to Web Worker
↳ Parser Engine (sql.js / xlsx / PapaParse / Parquet WebAssembly)
↳ Stream Data back to UI Thread
↳ Virtual Scroll Renderer (Smooth 60fps table view)
Thiết kế Cơ sở dữ liệu
Vì đây là ứng dụng phi máy chủ (Serverless / Static Client Only), cơ sở dữ liệu quan hệ không được lưu trữ trên server. Thay vào đó, dữ liệu của người dùng được lưu tạm thời trong bộ nhớ đệm RAM và IndexDB thông qua cơ chế luồng dữ liệu ảo:
- IndexedDB (Lưu vết các file đã mở gần đây, dung lượng tối đa 50MB)
- RAM Virtual Tables (Phân tích cú pháp và lưu trữ cấu trúc hàng/cột tạm thời)
- WebAssembly Memory Buffer (Dành riêng cho việc thực thi các câu lệnh SQL trực tiếp trên file .sqlite)
Thách thức & Giải pháp kỹ thuật
- Thách thức: Trình duyệt bị crash do tràn bộ nhớ (Out of Memory) khi người dùng mở các file CSV hoặc Excel có dung lượng lớn (>50MB) chứa hàng triệu dòng dữ liệu.
- Giải pháp: Triển khai luồng đọc file theo block (chunk-by-chunk stream reader) kết hợp kỹ thuật DOM Virtualization (chỉ render các dòng hiển thị trên màn hình) giúp tiết kiệm 95% bộ nhớ RAM của trình duyệt.
Thành quả đạt được
- Parse cực kỳ mượt mà file Excel 100,000 dòng trong dưới 2 giây.
- Bảo vệ an toàn dữ liệu tuyệt đối (Zero-leak) do không tải bất kỳ dữ liệu nào của khách hàng lên máy chủ từ xa.