¿Cómo se imprime desde una ventana emergente en javascript?

Tengo una aplicación .Net que crea dinámicamente una pequeña página HTML y la abre en una nueva ventana utilizando el método javascript document.open. Todo con esa funcionalidad está funcionando bien.¿Cómo se imprime desde una ventana emergente en javascript?

Ahora quiero agregar un botón a la página HTML que imprime la página. He intentado usar el siguiente código en vano:

<a href='print.html' onClick='window.print();return false;'> 
<img src='images/printer.png' height='32px' width='32px'></a>

Cuando se hace clic en el botón en la ventana emergente, no pasa nada. Pero cuando el código fuente de esta página se guarda y se carga en un navegador como una página separada, el botón de impresión funciona perfectamente. ~~Parece que el problema se debe al hecho de que el código está en una ventana emergente.~~ [El problema ahora parece ser que el código está escrito en la ventana emergente después de que se abre.] ¿Alguien sabe una forma de solucionar este problema o alguna alternativa?

EDIT:

Otro método que he tratado con los mismos resultados:

<input type='button' onclick='window.print()' value='Print' />

<a href='javascript:window.print()'> 
<img src='images/printer.png' height='32px' width='32px'></a>

nuevo EDIT:

El código anterior funciona en Firefox, pero no en IE7. ¿Alguna idea sobre cómo trabajar para IE?

EDITAR TODAVÍA OTRA:

Este es un caso de prueba utilizando el código que npup posted a continuación. En lugar de que el código de la ventana emergente viva en un archivo html separado, abro una URL en blanco y luego le escribo el código. Este paso parece ser lo que está causando el problema.

<html> 
<head> 
    <title>main</title> 
</head> 
<body> 
    <h1> 
     Pop & print</h1> 
    <button onclick="pop();"> 
     Pop</button> 

    <script type="text/javascript"> 
     var POP; 
     function pop() { 
      var newWin = window.open('', 'thePopup', 'width=350,height=350'); 
     newWin.document.write("<html><head><title>popup</title></head><body><h1>Pop</h1>" + 
      "<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" + 
      "<img src='images/printer.png' height='32px' width='32px'></a></body></html>"); 
     } 
    </script> 

</body> 
</html>

Fuente

2010-03-15 sglantz

que han resuelto el problema mediante la creación de una página HTML en blanco con el código HTML estándar. Luego agregué el contenido creando un nuevo elemento DOM y editando el innerHTML. El código resultante es la misma que en el ejemplo, simplemente reemplazando el comando newWin.document.write con lo siguiente:

var newDiv = newWin.document.createElement('div'); 
newDiv.innerHTML = "<h1>Pop</h1>" + 
     "<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" + 
     "<img src='images/printer.png' height='32px' width='32px'></a>" 
newWin.document.body.appendChild(newDiv);

Mientras que el problema se ha resuelto, no estoy seguro de lo que honestamente era la causa exacta de la problema. Si alguien tiene alguna idea, me gustaría escucharla.

Fuente

2010-03-31 14:59:35 sglantz

Puede deberse a que está realizando un retorno falso en el evento onclick de la etiqueta de anclaje.

Prueba esto:

<input type="button" onclick="window.print()" value="Print" />

Fuente

2010-03-15 16:44:18 azamsharp

Esto tuvo el mismo resultado, trabaja en otra ventana del navegador, pero no de una ventana emergente. – sglantz

¡Hmm! Cuando hago clic en el botón, abre la pila de impresoras para que seleccione la impresora. ¿Tiene impresoras adjuntas? Tal vez no puede encontrar las impresoras? Pero de todos modos debería abrir el cuadro de selección de la impresora. – azamsharp

¿Has probado el código desde una ventana emergente? Eso parece ser lo que está causando el problema. – sglantz

Usted puede tratar de:

<input type="button" onclick="self.print()" value="Print" />

<input type="button" onclick="window.focus();window.print()" value="Print" />

Pero esto podría no funcionar en MSIE debido a las restricciones en Cross-Frame Scripting. Creo que la mejor manera de hacerlo es colocar el botón de impresión en la ventana principal.

<script language="javascript"> 
    var winref = window.open('print.html','windowName','width=400,height=400'); 
</script> 

<form> 
    <input type="button" value="Print Popup" onclick="if (window.print) winref.print()"> 
</form>

Fuente

2010-03-15 17:24:05 ghoppe

Ninguno de los primeros dos métodos funcionó. El tercer método no es ideal y se hace más complicado porque el código para la página HTML se genera a partir del código .Net detrás basado en varios parámetros. – sglantz

Perdón por ser el portador de malas noticias. Si fuera yo, en el código donde generas el botón/enlace que abre la ventana emergente, crearía dos. "Mostrar resultados" e "Imprimir resultados" o lo que sea ... – ghoppe

Parece que debo ir por ese camino, pero aún no me doy por vencido. – sglantz

Si desea imprimir lo que hay en la ventana que abrió de, le sugiero que utilice

window.opener.print();

en la ventana emergente.

Fuente

2010-03-15 18:04:01 npup

Estoy buscando imprimir el contenido de la ventana emergente, no la ventana principal. – sglantz

* Doh *, muy lo siento. – npup

Debe haber algo más que el código que se muestra. Creo que funciona bien (he estado probando algunos ahora).

Aquí hay un caso de prueba minúsculo.Pruébalo en tu configuración y mira lo que sucede. Mi cuenta fue en Windows Vista, IE7 e IE8.

principal.html:

<html> 
    <head> 
    <title>main</title> 
    </head> 
    <body> 

    <h1>Pop & print</h1> 
    <button onclick="pop();">Pop</button> 
    <script type="text/javascript"> 
     var POP; 
     function pop() { 
     POP = window.open('popup.html', 'thePopup', 'width=350,height=350'); 
     } 
    </script> 

    </body> 
    </html>

popup.html:

<html> 
    <head> 
    <title>popup</title> 
    </head> 
    <body> 

    <h1>Pop</h1> 
    <p>Print me</p> 
    <a href="print.html" onclick="window.print();return false;"> 
     <img src="images/printer.png" height="32px" width="32px"> 
    </a> 

    </body> 
    </html>

Fuente

2010-03-17 08:46:13 npup

Este código funciona en mi configuración, pero no es totalmente aplicable a mi problema.La principal diferencia es que estoy generando el código html para la ventana emergente en tiempo de ejecución. Debido a esto, abro una ventana en blanco y luego escribo el html en ella. Actualizaré la pregunta con un caso de prueba usando su código que aún causa el problema. – sglantz

se le olvidó el Documento

newWin.document.close();

debe estar cerrada antes MSIE puede imprimirlo.

Fuente

2010-07-18 11:51:30 Roose

Aquí es una solución que funcionó para mí:

newWin.document.write(newhtml); 
newWin.window.location.reload(); // this is the secret ingredient 
newWin.focus();      // not sure if this line is necessary 
newWin.print();

No estoy 100% seguro de por qué esto funciona, pero creo que tiene que ver con uno de los siguientes: (1) un problema de seguridad de IE , (2) un problema de alcance (es decir, después de crear un nuevo documento, IE se confunde sobre qué documento imprimir), o (3) un problema de tiempo: el documento aún no está listo para 'aceptar' un comando de impresión. En cualquier caso, después de la recarga, el diálogo de impresión aparece sin problemas.

Fuente

2012-03-02 14:35:04

Quería crear una versión para imprimir de una página que luego se imprimiera automáticamente, esto es lo que se me ocurrió, ¡parece funcionar muy bien para mí!

function printPage(){ 
    var w = window.open(); 

    var headers = $("#headers").html(); 
    var field= $("#field1").html(); 
    var field2= $("#field2").html(); 

    var html = "<!DOCTYPE HTML>"; 
    html += '<html lang="en-us">'; 
    html += '<head><style></style></head>'; 
    html += "<body>"; 

    //check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space 
    //This allows you to reuse this on lots of pages with the same template 
    if(headers != null) html += headers + "<br/><br/>"; 
    if(field != null) html += field + "<br/><br/>"; 
    if(field2 != null) html += field2 + "<br/><br/>"; 

    html += "</body>"; 
    w.document.write(html); 
    w.window.print(); 
    w.document.close(); 
};

Fuente

2013-04-19 15:38:55

Esto funciona en Chrome:

<body ><img src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;"> 

      <script type="text/javascript"> 
       window.onload = function() { 
        window.print(); 
        setTimeout(function() { 
         window.close(); 
        }, 1); 
       }; 
      </script> 
    </body>

Fuente

2014-04-30 18:22:34

¿Cómo se imprime desde una ventana emergente en javascript?

Respuesta

Cuestiones relacionadas