Hướng Dẫn Toàn Diện Về Xử Lý Tập Tin Excel Khổng Lồ Trong Angular

Mục Lục

1. Giới thiệu
2. Vấn Đề: Tại Sao Các Phương Pháp Truyền Thống Không Hiệu Quả
3. Kiến Trúc Giải Pháp: Từ Excel Đến IndexedDB Với Angular
4. Triển Khai Kỹ Thuật
   • A. Tải Lên Tập Tin & Xử Lý Excel
   • B. Mở Rộng Dịch Vụ Dexie
   • C. Triển Khai Form Tìm Kiếm
   • D. Tích Hợp Quản Lý Trạng Thái
5. Lợi Ích Hiệu Suất
6. Thực Hành Tốt Nhất & Mẹo
7. Kết Luận & Lời Kêu Gọi Hành Động

Giới thiệu

Bạn đã bao giờ cố gắng tải lên một tệp Excel 50MB với hơn 100.000 hàng trong ứng dụng Angular của bạn chưa? Nếu có, có thể bạn đã thấy ứng dụng của mình đóng băng, bộ nhớ tăng vọt, và người dùng nhanh chóng mất kiên nhẫn. Tôi cũng đã trải qua tình huống này — một trong những khách hàng của tôi cần xử lý báo cáo GIS lớn ở định dạng Excel, và giải pháp ban đầu là đẩy tất cả vào bộ nhớ với NgRx đã khiến trình duyệt bị tê liệt.

• localStorage? Giới hạn khoảng 5–10MB và không được thiết kế cho dữ liệu lớn.
• NgRx state? Giữ một tập dữ liệu 100K hàng trong trạng thái là một công thức cho hiệu suất chậm chạp.
• Mảng thông thường trong bộ nhớ? Chỉ hoạt động cho đến khi tab trình duyệt bắt đầu tiêu thụ hàng gigabyte RAM.

Vậy giải pháp là gì? Theo kinh nghiệm của tôi, sự kết hợp chiến thắng là:

👉 Excel → JSON → IndexedDB (qua Dexie.js) → Tìm Kiếm Phản Ứng Trong Angular

Kiến trúc này mang lại khả năng xử lý dữ liệu cấp doanh nghiệp, tìm kiếm theo thời gian thực và giao diện người dùng phản ứng ngay cả với hàng trăm ngàn hàng.

Hãy để tôi hướng dẫn bạn cách tôi giải quyết vấn đề này và cách bạn cũng có thể làm vậy.

Vấn Đề: Tại Sao Các Phương Pháp Truyền Thống Không Hiệu Quả

Trước khi đi vào giải pháp, hãy cùng tôi phân tích lý do tại sao việc xử lý các tệp Excel khổng lồ trong Angular lại là một thách thức lớn.

• Giới hạn của localStorage.
• Thắt cổ chai hiệu suất trong NgRx.
• Vấn đề trải nghiệm người dùng.
• Tiêu thụ bộ nhớ.
• Khoảng trống khả năng tìm kiếm.

Rõ ràng, chúng ta cần một giải pháp mạnh mẽ hơn — và đây chính là lúc IndexedDB với Dexie phát huy tác dụng.

Kiến Trúc Giải Pháp: Từ Excel Đến IndexedDB Với Angular

Dưới đây là quy trình tổng thể mà tôi đã triển khai thành công trong các ứng dụng thực tế:

Bước 1: Tải Lên Excel

• Sử dụng Angular với validation (kích thước, loại).
• Đọc tệp dưới dạng ArrayBuffer để tránh tăng bộ nhớ.

Bước 2: Chuyển Đổi Excel Sang JSON

• Tận dụng thư viện XLSX.
• Chuyển đổi các sheet thành đối tượng JSON trong khi streaming các hàng nếu có thể.

Bước 3: IndexedDB Qua Dexie

• Dexie.js cung cấp một lớp bao bọc thân thiện với TypeScript cho IndexedDB.
• Tạo một schema với các trường đánh chỉ mục cho tìm kiếm nhanh.
• Lưu trữ tất cả các hàng Excel trực tiếp trong IndexedDB thay vì bộ nhớ.

Bước 4: Tìm Kiếm Phản Ứng

• Sử dụng Angular Reactive Forms với debouncing.
• Cung cấp cả tìm kiếm theo trường và tìm kiếm toàn văn.
• Truy vấn Dexie trực tiếp để có kết quả nhanh chóng.

Bước 5: Quản Lý Trạng Thái Với NgRx

• Giữ dữ liệu thô ra khỏi NgRx!
• Chỉ lưu trữ kết quả tìm kiếm và trạng thái UI (ví dụ: bộ lọc, phân trang).
• Sử dụng NgRx Effects cho các truy vấn bất đồng bộ Dexie.

Bước 6: Hiển Thị Kết Quả

• Hiển thị dữ liệu phân trang trong Angular Material Table.
• Tối ưu hóa việc render với trackBy và ChangeDetectionStrategy.OnPush.

Kiến trúc này kết hợp những điều tốt nhất từ cả hai thế giới: Dexie cho lưu trữ & tìm kiếm, NgRx cho phối hợp, Angular cho UI.

Triển Khai Kỹ Thuật

A. Tải Lên Tập Tin & Xử Lý Excel

Việc tải lên các tệp trong Angular là khá đơn giản, nhưng chi tiết mới là điều quan trọng.

onFileSelected(event: Event): void {
  const input = event.target as HTMLInputElement;
  if (!input.files?.length) return;

  const file = input.files[0];
  if (file.size > 50 * 1024 * 1024) {
    alert('Tệp quá lớn!');
    return;
  }

  const reader = new FileReader();
  reader.onload = async (e) => {
    const data = new Uint8Array(e.target?.result as ArrayBuffer);
    const workbook = XLSX.read(data, { type: 'array' });
    const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
    await this.excelService.storeData(jsonData);
  };
  reader.readAsArrayBuffer(file);
}

Lưu Ý Quan Trọng:

• Sử dụng ArrayBuffer thay vì readAsText để tối ưu hiệu suất.
• Luôn xác thực kích thước và loại tệp.
• Xử lý các tệp bị hỏng một cách hợp lý với try/catch.

B. Mở Rộng Dịch Vụ Dexie

Dexie giúp IndexedDB trở nên dễ sử dụng mà không cần 200+ dòng mã boilerplate.

import Dexie, { Table } from 'dexie';

export interface ExcelRow {
  id?: number;
  name: string;
  email: string;
  amount: number;
}

export class ExcelDB extends Dexie {
  rows!: Table<ExcelRow, number>;

  constructor() {
    super('ExcelDB');
    this.version(1).stores({
      rows: '++id,name,email,amount' // Chỉ mục cho tìm kiếm nhanh
    });
  }
}

@Injectable({ providedIn: 'root' })
export class ExcelService {
  private db = new ExcelDB();

  async storeData(data: ExcelRow[]): Promise<void> {
    await this.db.rows.bulkPut(data);
  }

  async searchByName(name: string): Promise<ExcelRow[]> {
    return this.db.rows.where('name').startsWithIgnoreCase(name).toArray();
  }
}

Điểm Nổi Bật:

• Schema bao gồm các chỉ mục (name, email, amount).
• Sử dụng bulkPut để chèn hàng loạt nhanh chóng.
• Các truy vấn theo chỉ mục chạy trong vài mili giây ngay cả với hơn 100K hàng.

C. Triển Khai Form Tìm Kiếm

Các Reactive Forms với debouncing giúp giao diện người dùng trở nên phản ứng nhanh hơn.

results$!: Observable<any[]>;

this.searchForm = this.fb.group({
  field: ['name'],
  query: ['']
});

this.searchForm.valueChanges
  .pipe(debounceTime(300), distinctUntilChanged())
  .subscribe(async ({ field, query }) => {
    const results = await this.excelService.searchByName(query);
    this.store.dispatch(searchResultAction({ searchResult: results }));
  });

showGrid() {
  this.results$ = this.store.select(selectAllSearchResults);
}

• debounceTime ngăn việc khởi động truy vấn trên mỗi lần gõ phím.
• Người dùng có thể chọn trường nào để tìm kiếm.
• Các tùy chọn nâng cao như “tìm kiếm trong tất cả các trường” có thể được thêm vào.

Và trong template, chúng ta có thể tận dụng Ag-Grid cho việc render và phân trang hiệu quả:

<button type="submit" (click)="showGrid()">Hiển Thị Kết Quả</button>

<ag-grid-angular
  [rowData]="results$ | async"
  [columnDefs]="columnDefs"
  [pagination]="true"
  [paginationPageSize]="10"
  style="width: 100%; height: 500px"
></ag-grid-angular>

D. Tích Hợp Quản Lý Trạng Thái

NgRx không nên lưu trữ các tập dữ liệu lớn — nhưng nó rất tuyệt cho việc phối hợp.

// action.ts
export const searchResultAction = createAction(
  '[Search] Load Result',
  props<{ searchResult: SearchResult[] }>()
);

// reducer.ts
export const initialsearchResultState: EntityState<SearchResult> = searchResultAdapter.getInitialState();
export const searchResultDbReducer = createReducer(
    initialsearchResultState,
    on(searchResultAction, (state, { searchResult }) => {
        const clearedState = searchResultAdapter.removeAll(state);
        return searchResultAdapter.upsertMany(searchResult, clearedState);
    }),
);

// selector.ts
export const selectSearchResultState = (state: SearchResult) => state.searchData;
export const selectAllSearchResults = createSelector(
  selectSearchResultState,
  searchResultAdapter.getSelectors().selectAll
);

• Các action khởi động tìm kiếm.
• Các effect xử lý các truy vấn bất đồng bộ của Dexie.
• Chỉ lưu trữ kết quả tìm kiếm + bộ lọc, không phải tập dữ liệu thô Excel.

Lợi Ích Hiệu Suất

• IndexedDB so với localStorage: IndexedDB hỗ trợ gigabyte, localStorage chỉ vài MB.
• Tốc độ: Các truy vấn theo chỉ mục có thể trả về kết quả trong vòng chưa đầy 100ms cho 100K+ hàng.
• Tối ưu hóa bộ nhớ: Dữ liệu sống trong IndexedDB, không phải trong heap JS.
• Khả năng mở rộng: Hỗ trợ nhiều lần tải lên Excel qua các phiên.
• Tương thích: Hoạt động trên tất cả các trình duyệt hiện đại (Chrome, Edge, Firefox, Safari).

Thực Hành Tốt Nhất & Mẹo

• Chèn theo Khối: Chèn các hàng theo khối (ví dụ: 5K một lần) để tránh chặn luồng chính.
• Sử Dụng Web Workers: Chuyển việc phân tích Excel sang một worker để giao diện mượt mà hơn.
• Chỉ Báo Tiến Trình: Hiển thị tiến trình tải lên + xử lý cho người dùng.
• Xác Thực: Kiểm tra kiểu dữ liệu trước khi lưu trữ (ví dụ: số lượng phải là số).
• Dọn Dẹp: Cung cấp nút “Xóa Cơ Sở Dữ Liệu” cho người dùng.
• Tránh Đánh Chỉ Mục Quá Mức: Quá nhiều chỉ mục làm chậm quá trình chèn. Hãy chọn lựa một cách khôn ngoan.

Kết Luận & Lời Kêu Gọi Hành Động

Việc xử lý các tệp Excel khổng lồ trong Angular không nhất thiết phải đau đớn. Bằng cách kết hợp phân tích Excel (XLSX) với IndexedDB (Dexie) và NgRx cho việc phối hợp, chúng ta có thể xây dựng các ứng dụng xử lý hàng trăm ngàn hàng với tìm kiếm nhanh chóng và trải nghiệm người dùng mượt mà.

Tôi đã sử dụng phương pháp này trong các ứng dụng tài chính và nhân sự thực tế nơi các tệp Excel lớn là điều bình thường — và sự khác biệt về hiệu suất là rất rõ ràng.

Bạn đã gặp phải những thách thức tương tự trong các dự án Angular của mình chưa? 👉 Giải pháp bạn thường sử dụng để xử lý các tập dữ liệu lớn ở frontend là gì? 👉 Bạn đã từng sử dụng IndexedDB trong sản xuất chưa?

Tôi rất muốn nghe những trải nghiệm của bạn. Hãy chia sẻ chiến lược và làm cho việc xử lý dữ liệu lớn trong Angular trở nên dễ dàng hơn.