Trong quá trình phát triển các hệ thống quản lý backend, việc xử lý yêu cầu in ấn nội dung trang web một cách chính xác và chuyên nghiệp là một thách thức phổ biến. Người dùng thường cần xuất dữ liệu biểu mẫu, báo cáo hoặc đồ thị dưới dạng in ấn có định dạng sạch sẽ, chuẩn xác. Ban đầu, phương pháp `window.print()` có vẻ là một giải pháp đơn giản, nhưng nó nhanh chóng bộc lộ những hạn chế khi làm việc với các giao diện người dùng phức tạp được xây dựng bằng các framework hiện đại như Vue 3. Các vấn đề như lệch kiểu dáng (CSS), phá vỡ bố cục, và sự xuất hiện của các yếu tố không mong muốn trong bản in trở nên thường gặp.

Những khó khăn này đã thúc đẩy việc tìm kiếm một giải pháp in ấn mạnh mẽ hơn trong hệ sinh thái Vue 3. Trong số đó, thư viện `vue3-print-nb` nổi lên như một công cụ khởi điểm tiềm năng, mở đường cho việc xây dựng một quy trình in ấn ổn định và linh hoạt hơn, phù hợp với các ứng dụng cấp doanh nghiệp. Đối với các nhà phát triển Vue 3 từ trung cấp trở lên, việc triển khai chức năng in không chỉ dừng lại ở việc gọi một API đơn thuần. Nó đòi hỏi sự phối hợp của vòng đời component, kiểm soát chặt chẽ các media query CSS dành cho in ấn, đảm bảo trải nghiệm người dùng mượt mà và khả năng thích ứng với nhiều kịch bản nghiệp vụ khác nhau.

Bài viết này sẽ đưa bạn đi sâu hơn việc tích hợp plugin đơn giản, phân tích cách xây dựng một module in ấn mạnh mẽ, dễ bảo trì và tối ưu trải nghiệm người dùng. Chúng ta sẽ bắt đầu với các tính năng cốt lõi của `vue3-print-nb`, sau đó khám phá các cấu hình nâng cao, cách ly kiểu dáng (CSS scoping), tối ưu hiệu suất và so sánh với các phương án thay thế khác, cung cấp một hướng dẫn toàn diện sẵn sàng ứng dụng vào môi trường sản xuất.

1. Nền Tảng: Tích Hợp và Cấu Hình Chuyên Sâu với vue3-print-nb

`vue3-print-nb` là một directive (chỉ thị) in ấn chuyên dụng cho Vue 3. Giá trị cốt lõi của nó nằm ở việc kết hợp liền mạch logic in ấn với hệ thống phản ứng (reactive system) và vòng đời component của Vue. Nó không chỉ đơn thuần là một wrapper cho `window.print()` mà còn cung cấp một giải pháp khai báo, có thể cấu hình linh hoạt.

1.1. Thiết Lập Môi Trường và Phân Tích Chỉ Thị Cốt Lõi

Đầu tiên, hãy cài đặt thư viện bằng trình quản lý gói bạn yêu thích:

npm install vue3-print-nb --save
# hoặc
yarn add vue3-print-nb

Khác với cách đăng ký plugin toàn cục trong Vue 2, ở Vue 3, chúng ta thường cài đặt dưới dạng plugin cấp ứng dụng. Trong tệp entry chính của bạn (ví dụ: `main.js` hoặc `main.ts`):

import { createApp } from 'vue';
import UngDungGoc from './App.vue';
import chiThiIn from 'vue3-print-nb'; // Đổi tên biến import

const ungDung = createApp(UngDungGoc);
ungDung.use(chiThiIn); // Điều này sẽ đăng ký chỉ thị v-print toàn cục
ungDung.mount('#app');

Giờ đây, bạn có thể sử dụng chỉ thị `v-print` trong bất kỳ template component nào. Chỉ thị này chấp nhận một đối tượng cấu hình, đóng vai trò trung tâm trong việc kiểm soát hành vi in ấn.

<template>
  <div>
    <section id="khuVucInBaoCao">
      <!-- Nội dung cần in -->
      <h2>Báo cáo Doanh số</h2>
      <table>
        <!-- ... dữ liệu bảng ... -->
      </table>
    </section>
    <button v-print="cauHinhIn">In Báo cáo</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const cauHinhIn = ref({
  maDinhDanh: 'khuVucInBaoCao', // ID của phần tử cần in
  tieuDeCuaSoPop: 'Báo Cáo Doanh Thu', // Tiêu đề cửa sổ in pop-up
  hienThiXemTruoc: true, // Rất nên bật tính năng xem trước
  tieuDeXemTruoc: 'Xem Trước In - Báo Cáo Doanh Thu',
  nhanNutInXemTruoc: 'Xác Nhận In',
});
</script>

Lưu ý: Thuộc tính `maDinhDanh` (thay cho `id` gốc) là bắt buộc. Nó chỉ định ID của phần tử DOM cần in. Đảm bảo ID này là duy nhất trên trang.

1.2. Vượt Qua Cơ Bản: Giải Thích Đối Tượng Cấu Hình Toàn Diện và Kỹ Thuật Thực Chiến

Đối tượng cấu hình cung cấp một loạt các hàm hook và tùy chọn phong phú. Hiểu rõ chúng sẽ giúp bạn giải quyết các yêu cầu phức tạp hơn. Dưới đây là một ví dụ cấu hình nâng cao, kèm theo mô tả về các trường hợp ứng dụng của từng tham số:

const cauHinhInNangCao = ref({
  // Mã định danh cốt lõi cho khu vực in
  maDinhDanh: 'khuVucHoaDon',
  // Tiêu đề của trang in (hiển thị trong cài đặt in của trình duyệt)
  tieuDeTrangIn: 'Hóa Đơn - Công Ty XYZ',
  // Đường dẫn đến CSS bên ngoài, dùng để ghi đè hoặc cung cấp kiểu dáng riêng cho bản in
  cssBoSung: 'https://cdn.vitdu.com/styles-in.css',
  // Thêm các thẻ HTML bổ sung vào <head> của tài liệu in,
  // ví dụ: để nhúng font chữ hoặc các thẻ meta đặc biệt
  htmlThemVaoHead: `
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <meta charset="utf-8" />
  `,
  // Tùy chọn xem trước in ấn (rất khuyến khích sử dụng)
  hienThiXemTruoc: true,
  tieuDeXemTruoc: 'Xem Trước Hóa Đơn',
  nhanNutInXemTruoc: 'In Ngay',
  // Xử lý trước khi in: một hàm có thể trả về Promise
  truocKhiIn: async (htmlNode) => {
    console.log('Đang chuẩn bị dữ liệu in...', htmlNode);
    // Giả lập một tác vụ bất đồng bộ, ví dụ: tải dữ liệu từ API
    await new Promise(resolve => setTimeout(resolve, 500));
    console.log('Hoàn thành chuẩn bị.');
    // Bạn có thể chỉnh sửa DOM ảo của bản in tại đây trước khi nó hiển thị
    // htmlNode.querySelector('h2').style.color = 'red';
  },
  // Xử lý sau khi in hoặc hủy in
  sauKhiIn: () => {
    console.log('Quá trình in đã hoàn tất hoặc bị hủy.');
    // Ví dụ: hiển thị thông báo cho người dùng
  },
  // Liệt kê các phần tử không mong muốn sẽ bị loại bỏ khỏi bản in
  loaiBoPhanTu: ['.nut-khong-in', '#thanh-dieu-huong'],
  // Truyền style trực tiếp vào tài liệu in
  styleNoiTuyetDoi: `
    body { margin: 0; padding: 10mm; }
    table { width: 100%; border-collapse: collapse; }
    th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
    .trang-ngat { page-break-after: always; }
  `,
  // Hướng trang in: 'portrait' (dọc) hoặc 'landscape' (ngang)
  huongTrang: 'portrait',
  // Lề trang (top, right, bottom, left)
  leTrang: '10mm 15mm 10mm 15mm',
  // Tùy chọn cho việc in nền (background graphics)
  inNen: true,
});