@libs-ui/components-preview-file

Component xem trước tệp tin hỗ trợ nhiều định dạng từ hình ảnh đến tài liệu văn phòng, PDF thông qua các bộ Viewer phổ biến.

Giới thiệu

LibsUiComponentsPreviewFileComponent là một component cung cấp giao diện modal để xem nhanh nội dung của tệp tin. Nó hỗ trợ điều hướng giữa một danh sách tệp, các nút hành động tùy chỉnh (như download, share) và tự động nhận diện định dạng để sử dụng viewer phù hợp (Google Viewer cho PDF/Images, Microsoft Viewer cho Office documents).

Tính năng

• ✅ Hỗ trợ đa định dạng: Image (JPEG, PNG, SVG), PDF, Office (DOCX, XLSX, PPTX).
• ✅ Viewer tích hợp: Sử dụng Google và Microsoft Online Viewers cho các tài liệu phức tạp.
• ✅ Điều hướng: Hỗ trợ xem danh sách nhiều tệp với nút Prev/Next.
• ✅ Tùy biến hành động: Cho phép thêm các nút điều khiển tùy chỉnh trên header.
• ✅ Lazy Loading: Chỉ load viewer khi tệp được chọn.
• ✅ OnPush Change Detection
• ✅ Angular Signals

Khi nào sử dụng

• Khi cần xem nhanh nội dung của một hoặc nhiều tệp đính kèm.
• Hỗ trợ duyệt album ảnh hoặc danh sách tài liệu PDF, Office.
• Tránh việc phải tải tệp về máy chỉ để xem nội dung cơ bản.

Cài đặt

# npm
npm install @libs-ui/components-preview-file

# yarn
yarn add @libs-ui/components-preview-file

Import

import { LibsUiComponentsPreviewFileComponent } from '@libs-ui/components-preview-file';

@Component({
  standalone: true,
  imports: [LibsUiComponentsPreviewFileComponent],
  // ...
})
export class YourComponent {}

Ví dụ

Cơ bản

<libs_ui-components-preview_file
  [data]="fileList"
  [(index)]="currentIndex"
  (outClose)="onClose()" />

Với nút bấm tùy chỉnh

<libs_ui-components-preview_file
  [data]="fileList"
  [(index)]="currentIndex"
  [buttons]="customButtons"
  (outClose)="onClose()" />

API

libs_ui-components-preview_file

Inputs

| Property | Type | Default | Description | | ----------- | ----------- | ------------ | ------------------------------------------------------------- | | [data] | IFile[] | Bắt buộc | Danh sách các đối tượng tệp tin cần xem trước. | | [(index)] | number | Bắt buộc | Vị trí tệp hiện tại trong danh sách (hỗ trợ Two-way binding). | | [buttons] | IButton[] | [] | Danh sách các nút hành động bổ sung hiển thị trên header. | | [zIndex] | number | undefined | Thiết lập z-index cho modal preview. |

Outputs

| Property | Type | Description | | ------------ | ------ | --------------------------------------------------------------- | | (outClose) | void | Phát ra khi người dùng nhấn nút đóng hoặc click ra ngoài modal. |

Types & Interfaces

export interface IFile {
  id?: string;
  name?: string;
  file?: File;
  size?: string;
  url?: string;
  origin_url?: string;
  mimetype?: string;
  type?: 'document' | 'image' | 'video' | 'audio';
  extension?: string;
}

export interface IButton {
  key: string;
  label?: string;
  type?: string;
  classIconLeft?: string;
  iconOnlyType?: boolean;
  action?: (index: number) => Promise<void>;
}

Styling

CSS Classes

| Class | Description | | ------------------------- | -------------------------------------------------- | | .preview-file-container | Container chính của modal preview. | | .preview-header | Thanh tiêu đề chứa tên file và các nút điều hướng. | | .preview-body | Vùng hiển thị nội dung file (iframe/img). |

Công nghệ

| Technology | Version | Purpose | | ----------------------- | ------- | ----------------------- | | Angular | 18+ | Framework | | Google Viewer | - | PDF & Image Viewing | | Microsoft Office Online | - | Office Document Viewing | | Angular Signals | - | State management |

Demo

npx nx serve core-ui

Truy cập: http://localhost:4200/preview-file

Unit Tests

# Chạy tests
npx nx test components-preview-file

# Coverage
npx nx test components-preview-file --coverage

License

MIT