pdf2htmlEX là công cụ chuyển đổi PDF sang HTML mạnh mẽ, giữ nguyên văn bản và định dạng. Tuy nhiên, kiểu in ấn của các tệp HTML được tạo ra có thể gặp một số vấn đề. Bài viết này sẽ hướng dẫn bạn sử dụng công cụ phát triển của trình duyệt để gỡ lỗi và tối ưu hóa kiểu in ấn.

Tại sao cần gỡ lỗi kiểu in ấn? 📄

Dù hiển thị trên màn hình tốt, khi in ấn, các tệp HTML từ pdf2htmlEX có thể gặp các lỗi phổ biến:

• Cắt trang: Nội dung bị cắt mất một phần.
• Thiếu nền: Hình nền SVG không được in.
• Hiển thị font chữ bất thường: Font chữ hiển thị sai khi in.
• Ngắt trang không hợp lý: Nội dung bị ngắt giữa chừng.

Nguyên nhân thường do cấu hình CSS cho media print không đúng. pdf2htmlEX đã hỗ trợ sẵn kiểu in ấn trong tệp share/base.css.in.

Sử dụng chức năng xem trước khi in trong công cụ phát triển 🛠️

Các trình duyệt hiện đại đều có công cụ xem trước khi in mạnh mẽ.

Công cụ phát triển Chrome/Edge

1. Mở công cụ phát triển (F12).
2. Vào "More tools" → "Rendering".
3. Trong mục "Emulate CSS media type", chọn "print".
4. Xem trước hiệu ứng kiểu in ấn theo thời gian thực.

Công cụ phát triển Firefox

1. Mở công cụ phát triển (F12).
2. Vào "Responsive Design Mode".
3. Ở góc trên bên phải, chọn media type "print".
4. Điều chỉnh kích thước và hướng trang.

Cấu hình cốt lõi cho kiểu in ấn của pdf2htmlEX

Trong tệp share/base.css.in, pdf2htmlEX đã định nghĩa sẵn media query cho in ấn:

@media print {
  @page { margin:0; }
  html { margin:0; }
  body {
    margin:0;
    -webkit-print-color-adjust:exact; /* Cho phép in nền trong WebKit */
  }
  #sidebar { display:none; }
  #page-container {
    width:auto;
    height:auto;
    overflow:visible;
    background-color:transparent;
  }
  .@CSS_CSS_DRAW_CN@ { display:none; }
}

Các vấn đề thường gặp và cách khắc phục 🔧

1. Lề trang không phù hợp

Triệu chứng: Quá nhiều khoảng trắng xung quanh trang in.
Giải pháp: Điều chỉnh lề trong cài đặt in của trình duyệt hoặc sửa quy tắc @page trong CSS:

@media print {
  @page {
    margin: 0.5in; /* Điều chỉnh giá trị phù hợp */
  }
}

2. Nền không được in

Triệu chứng: Nền SVG hoặc màu nền biến mất khi in.
Giải pháp: Đảm bảo CSS chứa thuộc tính sau:

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

3. Vị trí ngắt trang không hợp lý

Triệu chứng: Bảng hoặc hình ảnh bị ngắt ở giữa trang.
Giải pháp: Thêm điều khiển ngắt trang bằng CSS:

@media print {
  table, img {
    page-break-inside: avoid;
  }
  h1, h2, h3 {
    page-break-after: avoid;
  }
}

Mẹo gỡ lỗi và thực hành tốt nhất 🎯

Mẹo 1: Sử dụng trình mô phỏng kiểu in

Khi đã chuyển sang chế độ in trong công cụ phát triển, bạn có thể:

• Chỉnh sửa CSS trực tiếp và xem ngay kết quả.
• Kiểm tra với các kích thước trang khác nhau (A4, Letter,...).
• Xem trước hiệu ứng ngắt trang.

Mẹo 2: Tạo tệp kiểu in tùy chỉnh

Để kiểm soát chi tiết hơn, hãy tạo tệp CSS riêng cho in ấn:

1. Tạo tệp print.css trong thư mục đầu ra của pdf2htmlEX.
2. Thêm liên kết trong tệp HTML:

<link rel="stylesheet" media="print" href="print.css">

Mẹo 3: Kiểm tra trên nhiều trình duyệt

Hỗ trợ kiểu in ấn giữa các trình duyệt có sự khác biệt:

• Chrome/Edge: Hỗ trợ tốt nhất cho -webkit-print-color-adjust.
• Firefox: Cần quy tắc đặc biệt với @-moz-document url-prefix().
• Safari: Tương tự Chrome nhưng có thể có khác biệt nhỏ.

Tối ưu hóa nâng cao: Thiết kế in đáp ứng

Đối với các tài liệu PDF phức tạp, bạn có thể tối ưu hóa cho từng thiết bị in cụ thể:

/* Tối ưu cho giấy A4 */
@media print and (width: 210mm) and (height: 297mm) {
  /* Các kiểu dành riêng cho A4 */
}

/* Tối ưu cho giấy Letter */
@media print and (width: 8.5in) and (height: 11in) {
  /* Các kiểu dành riêng cho Letter */
}

Sau khi chỉnh sửa, hãy kiểm tra kết quả bằng các tệp test trong thư mục test/browser_tests. Bằng cách sử dụng các kỹ thuật này, bạn có thể đảm bảo kết quả chuyển đổi từ pdf2htmlEX luôn hiển thị hoàn hảo khi in ấn.