5 tiện ích jQuery siêu hay để in trang web

Có một điểm thú vị có thể bạn chưa biết đó là bạn hoàn toàn có thể chủ động kiểm soát giao diện print preview trên trang của mình. Theo mặc định trình duyệt sẽ chọn phần được in (có khả năng cao là cả một cửa sổ đó luôn), tuy nhiên vẫn có một vài jQuery plugin có thể giúp bạn kiểm soát được những nội dung được in ra ngoài.

jQuery Print Preview

jQuery plugin nho nhỏ này cho phép bạn mở của sổ trình duyệt mới để hiển thị một số phần cụ thể của trang mà bạn muốn in. Không như các plugin khác trong bài, plugin này không trực tiếp kích hoạt chức năng in của trình duyệt, mà đơn giản chỉ mở ra một cửa sổ chỉ giữ lại thông tin cần in (hoàn hảo, vì bạn giờ có thể in trực tiếp rồi).

Plugin Đặc biệt hữu ích khi bạn muốn in một phần cụ thể trong dữ liệu, như một card thông tin hoặc một hàng trong bảng. Bạn có thể mớ chúng thành một cửa sổ mới và in ngay từ đó. Như vậy, bạn có thể đảm bảo chỉ in những nội dung mình cần.

Công cụ có khả năng hỗ trợ trình duyệt khá tốt và có thể làm việc được với hầu hết các trình duyệt hiện đại.

Website

Demo

jQuery Print Plugin

Đừng thấy demo xấu quá mà coi thường. jQuery Print Plugin làm việc rất tốt và đi kèm với một loạt tùy chỉnh cho mọi nhu cầu in ấn của bạn. Ví dụ, bạn có thể kiếm soát được popup sẽ thay thế cửa sổ hiện tại hay không (thông qua một iFrame), đặt thời gian chờ trước khi in display renders và đặt content trước/sau popup.

Để cài đặt và bắt đầu sử dụng, bạn chỉ việc nhập jQuery object hoặc selector và xong rồi, plugin sẽ tự lo hết.

Website

Github

Demo

jQuery printPage plugin

Plugin tạo một cửa sổ mẫu nhỏ với một message và ảnh, load ngay trước mẫu in trình duyệt chính. Bạn có thể thêm nội dung in được của chính bạn vào page mới và sau đó dùng plugin này để in ra. Nếu người dùng không mở JavaScript, cô cụng sẽ chỉ liên kết như thông thường, mở content trong cửa sổ mới (tại đây bạn sẽ in như thường).

Github

Demo

jQuery PrintMe

Plugin này đơn giản hết mức có thể. Tất cả bạn phải làm là call công cụ lên jQuery element muốn in và print preview window sẽ xuất hiện. Không có tùy chọn nào quá nổi bật và công cụ làm việc đúng như những gì bạn mong đợi nó làm được.

Tuy không có hết các tính năng có ở các plugin khác. Công cụ này lại đơn giản hơn và làm việc rất tốt với hầu hết trình duyệt. Một điểm hay nữa, bạn có thể xem thử code nguồn của plugin này để tham khảo quá trình chuẩn bị bản in rất hay của nó.

Website

Demo

jQuery Print Preview Plugin

Cuối danh sách, chúng ta có jQuery Print Preview plugin. Công cụ được thiết kế để cho phép người dùng xem trước phiên bản in của một website. Khác với print preview truyền thống, plugin này quy tụ tất cả content và print style trong một modal window duy nhất.

Công cụ hỗ trợ trình duyệt cực tốt (mãi đến tận IE 6), nhưng không cung cấp nhiều tùy chọn cài đặt. Plugin còn tồn đọng nhiều vấn đề chưa giải quyết nên có vẻ như người tạo ra plugin này sẽ không tiếp tục phát triển nó trong tương lai.

Website

Demo

Tôi tự làm một plugin như thế này cho riêng mình được không?

It’s not too difficult to create this kind of functionality yourself. What most of these plugins are doing behind the scenes is dynamically creating an <iframe> element, appending it to the page (but positioned off-screen using CSS), setting the contents of the <iframe>, calling .print() on the iframe, then removing it after a short delay.

Những kiểu chức năng như thế này không quá khó thực hiện. Trong thực tế, những thao tác mà các plugin này thực sự thực hiện là chủ động tạo <iframe> element, append element vào oage (nhưng lại được đặt off-screen bằng CSS), tạo content của <iframe>, call  .print() lên iframe, rồi xóa bỏ đi sau một khoản delay ngắn.

Dưới đây là một ví dụ

Còn đây là demo của kỹ thuật này trong thực tế. Khi bạn nhấn nút Print the Coupon, bạn sẽ nhận thấy rằng print preview chỉ hiển thị coupon và heading. Đoạn code này chạy tốt nhất trên trình duyệt như Chrome, cho phép bạn xem print preview. Nếu bạn đang thử cách này trong Firefox, hãy lưu output dưới dạng PDF để xem kết quả.

Lời kết

Nhìn chung, công nghệ đang càng ngày rời gia công việc in ấn nói chung, chứ chưa nói gì đến in trang web, nên không hề ngạc nhiên khi các công cụ như thế này đang ngày càng “già” hơn. Đến cùng ngoại trừ một số trường hợp đặc biệt như in giấy mời event, barcode, xác nhận hóa đơn/chứng từ thu mua; việc in trang web cũng không có quá nhiều hiệu dụng.

Techtalk via Sitepoint