Usando JQuery para abrir una ventana emergente e imprimir

Hace un tiempo creé un complemento lightbox usando jQuery que cargaría una url especificada en un enlace en un lightbox. El código es muy simple:Usando JQuery para abrir una ventana emergente e imprimir

$('.readmore').each(function(i){ 
    $(this).popup(); 
});

y el vínculo se vería así:

<a class='readmore' href='view-details.php?Id=11'>TJ Kirchner</a>

El plugin también podría aceptar los argumentos de anchura, altura, una URL diferente, y más datos para pasar a través.

El problema que estoy enfrentando ahora es imprimir la caja de luz. Lo configuré para que el lightbox tenga un botón de impresión en la parte superior de la caja. Ese enlace abriría una nueva ventana e imprimiría esa ventana. Todo esto está siendo controlado por el plugin lightbox. Esto es lo que se ve que un código como:

$('.printBtn').bind('click',function() { 
    var url = options.url + ((options.url.indexOf('?') < 0 && options.data != "") ? '?' : '&') + options.data; 
    var thePopup = window.open(url, "Member Listing", "menubar=0,location=0,height=700,width=700"); 
    thePopup.print(); 
});

El problema es no parece el guión estar esperando que se cargue la ventana. Quiere imprimir el momento en que aparece la ventana. Como resultado, si hago clic en "cancelar" en el cuadro de diálogo de impresión, aparecerá una y otra vez hasta que se cargue la ventana. La primera vez que intenté imprimir, obtuve una página en blanco. Eso podría ser porque la ventana no terminó de cargarse.

Necesito encontrar una manera de alterar el bloque de código anterior para esperar hasta que la ventana se cargue y luego imprima. Siento que debería haber una manera fácil de hacerlo, pero aún no lo he encontrado. O eso, o necesito encontrar una forma mejor de abrir una ventana emergente e imprimir desde el script lightbox en la ventana primaria, sin alternar el código de la página web en la ventana emergente.

Fuente

2010-04-08 TJ Kirchner

Usted debe poner la función de impresión en su archivo de vista-details.php y llamarlo una vez que el archivo se carga, ya sea usando <body onload="window.print()"> o $(document).ready(function() { window.print(); });

Fuente

2010-04-08 21:12:19

Bueno, estoy tratando de hacer esto sin agregar código al archivo view-details.php porque ese archivo no debería necesitar saber que se está imprimiendo. De esa forma no tengo que agregar un snippit de código a cada archivo que cargue en el lightbox. –

¿Por qué usa window.open si lo está cargando en Lightbox? Si está utilizando jQuery para cargar el HTML a través de AJAX, puede usar la función .load() en jQuery y activar la impresión con la devolución de llamada onSuccess. –

Porque no puedo imprimir muy bien desde una caja de luz. Tengo todo este fondo negro que lo rodea. Se ve y se imprime mejor en su propia ventana. Es una idea interesante, usando .load(), pero no quiero que el contenido se imprima justo después de que se cargue lightbox. Solo cuando el usuario haga clic en el enlace de impresión, quiero que se imprima la casilla. –

¿Estás seguro de que no puede modificar el código HTML en la ventana emergente ?

Si es posible, agregar una etiqueta <script> al final de HTML de la ventana emergente, y llamar a window.print() su interior. Entonces no se llamará hasta que el HTML se haya cargado.

Fuente

2010-04-08 21:12:55

No quiero alterar el código html en la ventana emergente ... pero tal vez podría añadir un onload = "window.print()" al html que se está cargando ... déjame jugar con esa idea un poco –

¡Lo tengo! Me pareció una idea aquí

http://www.mail-archive.com/[email protected]/msg18410.html

En este ejemplo, se cargan una ventana emergente en blanco en un objeto, se clonan los contenidos del elemento que se mostrarán, y se anexa al cuerpo del objeto. Como ya sabía el contenido de los detalles de la vista (o cualquier página que cargué en el lightbox), simplemente tuve que clonar ese contenido y cargarlo en un objeto. Entonces, solo necesitaba imprimir ese objeto. El resultado final se parece a esto:

$('.printBtn').bind('click',function() { 
    var thePopup = window.open('', "Customer Listing", "menubar=0,location=0,height=700,width=700"); 
    $('#popup-content').clone().appendTo(thePopup.document.body); 
    thePopup.print(); 
});

tuve un pequeño inconveniente de que la hoja de estilo que estaba usando en vista-details.php fue el uso de un vínculo relativo. Tuve que cambiarlo a un enlace absoluto. La razón es que la ventana no tenía una URL asociada, por lo que no tenía una posición relativa para dibujar.

Funciona en Firefox. Necesito probarlo en algunos otros navegadores principales también.

No sé qué tan bien funciona esta solución cuando se trata de imágenes, videos u otras soluciones intensivas en el proceso. Aunque, funciona bastante bien en mi caso, ya que solo estoy cargando tablas y valores de texto.

Gracias por la entrada! Me diste algunas ideas de cómo evitar esto.

Fuente

2010-04-08 21:55:40

Usando JQuery para abrir una ventana emergente e imprimir

Respuesta

Cuestiones relacionadas