2012-06-21 10 views
22

¿Es posible activar un evento javascript cuando un usuario imprime una página? Me gustaría eliminar una dependencia de una biblioteca de JavaScript, cuando un usuario opta por imprimir una página, ya que la biblioteca es excelente para la pantalla pero no para la impresión.¿Cómo desencadenar Javascript en el evento de impresión?

¿Alguna idea de cómo lograr esto?

+1

¿Qué estás tratando de lograr exactamente?¿A qué te refieres con "la biblioteca es genial para pantalla pero no para impresión"? –

+1

¿Qué tiene que ver una biblioteca de JavaScript con la impresión? El navegador no invoca ningún script de página al imprimir de todos modos. – Pointy

+0

use la función window.onprint, window.onafterprint, window.onbeforeprint –

Respuesta

24

Para cualquier tropiezo sobre esta respuesta de Google, déjame intentar aclarar cosas:

Como señaló Ajay, hay dos eventos que se disparan para la impresión, pero no son bien compatibles; por lo que he leído, solo son compatibles con los navegadores Internet Explorer y Firefox (6+). Esos eventos son window.onbeforeprint y window.onafterprint, que (como era de esperar) se activarán antes y después del trabajo de impresión.

Sin embargo, como se señala en el enlace de Joe (https://stackoverflow.com/a/9920784/578667), no es exactamente cómo se implementa en todos los casos. En la mayoría de los casos, ambos eventos se disparan antes del diálogo; en otros, la ejecución del script puede detenerse durante el diálogo de impresión, por lo que ambos eventos pueden dispararse al mismo tiempo (después de que se haya completado el diálogo).

Para obtener más información (y el apoyo del navegador) para estos dos eventos:

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

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

La respuesta corta: si usted está esperando para interferir con el flujo de impresión, NO . Si espera desencadenar código después de imprimir, no va a funcionar como lo desea; esperar un soporte de navegador deficiente, y tratar de degradar con gracia.

+2

Además, si está intentando alterar el diseño o la visualización para imprimir, debe hacerlo con una hoja de estilo de impresión (o reglas '@media print' dentro de su css) y no JavaScript –

+0

@TomPietrosanti Estoy totalmente de acuerdo, pero hay algunas cosas que no puedes hacer con CSS (como cambiar el orden de los elementos). Ver [mi pregunta] (http://stackoverflow.com/questions/25030208/dom-manipulation-on-print-only). – chharvey

+0

Puede cambiar el orden (hasta cierto punto) si puede usar flexbox, pero de lo contrario es cierto. Si no necesitas JS, lo evitaría, puede provocar algunos errores muy extraños. –

0

si tiene un escenario en el que U quiere hacer algo antes de que aparezca de diálogo de impresión o sólo después de que el documento se envía al uso de cola de impresión pueden utilizar los siguientes eventos window.onafterprint, window.onbeforeprint

+0

Lo probé en Chome, pero no funciona. Aunque podría en IE, pero IE no es bueno para mí aquí. Gracias. http://stackoverflow.com/a/9920784/578667 – Joe

+1

Con un poco de hackeo, también puedes hacer que funcione en navegadores basados ​​en webkit: http://tjvantoll.com/2012/06/15/detecting-print- requests-with-javascript/El único que queda fuera es Opera, pero una persona emprendedora probablemente también podría crear un polyfill/hack para eso. –

9

Se puede hacer sobrescribiendo, por ejemplo, window.onbeforeprint.

Usando Chrome, encontré que el más arcano window.matchMedia("print").addListener(function() {alert("Print Dialog open.")}) también funciona.

Esta característica discutible se puede utilizar para evitar que los usuarios impriman una página.

Lo he visto la primera vez en Scribd. Allí, si abre el cuadro de diálogo Imprimir con el comando de menú, el contenido de la página se atenuará y aparecerá un mensaje emergente de advertencia explicando por qué no puede imprimir la página. (Nota para el análisis completo: en esa página, control-p también se anula para que no pueda usarlo para abrir el cuadro de diálogo de impresión. Además, hay un @media CSS para la salida de la impresora que oculta el contenido; todo probado en Firefox)

+0

En Chrome, su solución "arcana" funciona, pero ocurre cuatro veces. – chharvey

+2

Imagino que si tiene varios estilos de impresión o imprime hojas de estilo, se dispararía para todas las que tenga. Cuando ejecuto este código sin estilos de impresión, se ejecuta una vez. –

0

Para cualquiera que venga aquí buscando una opción usando Bootstrap como yo, utilicé el siguiente código para lograr este cuando se hace clic en un botón de impresión. Esta voluntad no trabajo cuando presione CTRL + P.

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

es necesario agregar oculto-impresión a todo lo que no desea imprimir y luego añadir un ID (o una clase si usted tiene más de una sección) de print_section al bit que desea imprimir! Poco hacky pero funciona!

+0

También puede [anular CTRL + P] (https://stackoverflow.com/a/3680946/479156) para activar el mismo código/función, pero todavía no es 100% de prueba ya que hay más formas de imprimir. – Ivar

Cuestiones relacionadas