Cài đặt và sử dụng

Cài đặt

Plugin @digiforce-nc/plugin-action-print hoạt động 100% ở client — không có server API, không gửi request. Kích hoạt qua Plugin Manager.

Thêm nút Print

Plugin đăng ký action print tại hai vị trí:

Vị trí	Schema Initializer	Mô tả
Detail view	details:configureActions	Nút Print trong thanh action của detail view
Calendar form	CalendarFormActionInitializers	Nút Print trong popup event của calendar

Cách thêm

1. Mở Schema Editor trên block Detail hoặc Calendar.
2. Vào Configure actions → chọn Print.
3. Lưu schema.

Sử dụng

1. Mở detail view (xem chi tiết) của một bản ghi, hoặc click event trên calendar.
2. Nhấn nút Print trên thanh action.
3. Plugin sử dụng react-to-print để chụp vùng .df-grid (chứa nội dung detail/calendar view).
4. Trình duyệt mở native print dialog.
5. Chọn máy in → Print, hoặc chọn Save as PDF để tải file PDF.

Vùng in .df-grid

Plugin nhắm vào CSS class .df-grid để xác định nội dung cần in:

Thuộc tính	Mô tả
Bao gồm	Toàn bộ nội dung grid trong detail/calendar view
Không bao gồm	Toolbar, sidebar, navigation
CSS in	react-to-print tự inject print stylesheet

Luồng kỹ thuật

1. useDetailPrintActionProps hook tìm DOM element .df-grid.
2. Gọi react-to-print với contentRef trỏ đến element.
3. react-to-print clone DOM, inject print stylesheet, tạo hidden iframe.
4. Gọi window.print() → trình duyệt hiển thị print dialog.

Lưu ý khi in

Lưu ý	Mô tả
CSS tương thích	react-to-print inject stylesheet riêng cho print media
Ẩn element	Toolbar, sidebar tự ẩn trong print mode
Hình ảnh	Hình ảnh trong grid được giữ nguyên
Table overflow	Bảng dài có thể bị cắt trang — trình duyệt tự xử lý pagination
Cross-browser	Hoạt động trên Chrome, Firefox, Safari, Edge