Làm cách nào để kích hoạt javascript trên sự kiện in?

Question

Có thể kích hoạt sự kiện javascript khi người dùng in một trang không? Tôi muốn xóa một phụ thuộc vào thư viện javascript, khi người dùng chọn in một trang, vì thư viện rất tuyệt vời cho màn hình nhưng không phải để in.

Bất kỳ ý tưởng nào để đạt được điều này?

Answer 1

Đối với bất cứ ai vấp ngã theo câu trả lời này từ Google, hãy để tôi cố gắng xóa mọi thứ:

Như Ajay đã chỉ ra, có hai sự kiện được kích hoạt để in, nhưng chúng không được hỗ trợ tốt; theo như tôi đã đọc, chúng chỉ được hỗ trợ trong trình duyệt Internet Explorer và Firefox (6+). Những sự kiện đó là window.onbeforeprint và window.onafterprint, mà (như bạn mong đợi) sẽ kích hoạt trước và sau lệnh in.

Tuy nhiên, như được nêu trong liên kết của Joe (https://stackoverflow.com/a/9920784/578667), đó không phải là cách thực hiện chính xác trong mọi trường hợp. Trong hầu hết các trường hợp, cả hai sự kiện đều kích hoạt trước hộp thoại; ở những người khác, việc thực thi tập lệnh có thể bị tạm dừng trong hộp thoại in, do đó cả hai sự kiện có thể kích hoạt cùng một lúc (sau khi hộp thoại hoàn tất).

Để biết thêm thông tin (và hỗ trợ trình duyệt) cho hai sự kiện này:

https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeprint

https://developer.mozilla.org/en-US/docs/DOM/window.onafterprint

Câu trả lời ngắn: nếu bạn đang hy vọng có thể can thiệp vào quy trình in, không . Nếu bạn hy vọng kích hoạt mã sau khi in, nó sẽ không hoạt động như thế nào bạn muốn; mong đợi hỗ trợ trình duyệt kém, và cố gắng làm suy giảm một cách duyên dáng.

Answer 2

nếu bạn có một kịch bản mà u muốn làm điều gì đó trước khi hộp thoại in xuất hiện hoặc ngay sau khi tài liệu được gửi đến sử dụng hàng đợi máy in có thể sử dụng các sự kiện dưới đây window.onafterprint, window.onbeforeprint

Answer 3

Có thể thực hiện bằng cách ghi đè, ví dụ: window.onbeforeprint.

Sử dụng Chrome, tôi nhận thấy rằng window.matchMedia("print").addListener(function() {alert("Print Dialog open.")}) phức tạp hơn cũng hoạt động.

Tính năng gây tranh cãi này có thể được sử dụng để ngăn người dùng in một trang.

Tôi đã gặp nó lần đầu tiên trên Scribd. Ở đó, nếu bạn mở hộp thoại in bằng lệnh menu, nội dung trang sẽ chuyển sang màu xám và thông báo bật lên cảnh báo xuất hiện giải thích lý do bạn không thể in trang. (Lưu ý để phân tích đầy đủ: trên trang đó, control-p cũng được ghi đè lên để bạn không thể sử dụng nó để mở hộp thoại in. Ngoài ra, có một @media CSS cho đầu ra máy in ẩn nội dung, tất cả được thử nghiệm trên Firefox).

Answer 4

Đối với bất kỳ ai đến đây tìm kiếm tùy chọn bằng Bootstrap như tôi, tôi đã sử dụng mã sau để đạt được điều này khi nút in được nhấp. này sẽ không làm việc khi họ bấm tổ hợp phím CTRL + P.

$("#print_page").click(function(){ 
$("#print_section").addClass('visible-print-block'); 
window.print(); 
$("#print_section").removeClass('visible-print-block');}) 

Bạn cần phải thêm ẩn-in để bất cứ điều gì bạn không muốn in và sau đó thêm một ID (hoặc một lớp học nếu bạn có nhiều hơn một phần) của print_section đến bit bạn muốn in! Bit hacky nhưng nó hoạt động!