1

tengo un problema. Luego de haber cancelado la ventana de impresión, me devuelve al modal donde estaba, pero ya no funciona ningún botón ni la tecla esc, como que la página se queda bloqueada. ¿cómo podría solucionar ese problema?

$('#BtnImprimir').click(function() {
        printDiv('#impresion')
        });
    });

function printDiv(nombreDiv) {
     var contenido= document.getElementById('impresion').innerHTML;
     var contenidoOriginal= document.body.innerHTML;

     document.body.innerHTML = contenido;

     window.print();

     document.body.innerHTML = contenidoOriginal;
}

Ese es el código del botón el id del div es 'impresion'. Me lleva a la impresión y cuando doy cancelar ya no se puede hacer nada.. como podría solucionarlo.. introducir la descripción de la imagen aquí

1 respuesta 1

0

El problema es que cuando modificas un elemento por medio de .innerHTML, el navegador vuelve a interpretar todo el contenido, perdiendo referencia de todos los elementos anteriores.

Puedes simplificar la impresión sin necesidad de modificar el contenido de tu HTML, solo recurriendo a media queries de CSS donde especificas el tipo de dispositivo y la forma en que se van a mostrar (u ocultar) los elementos:

document.querySelector('#imprimir').addEventListener('click', e => {
    window.print();
});
/* Aplicar solo a impresión */
@media only print {
    /* Ocultar todo el contenido */
    html body * { display: none; }
    /* Imprimir solo el contenido del elemento deseado */
    #impresion { display: block; }
}
<h1>Esto no se va a imprimir</h1>
<div id="impresion">Solo esto va a ser enviado a la impresora.</div>
<p>Más contenido</p>
<button id="imprimir">Imprimir</button>

En caso de que necesites imprimir diferentes contenedores, tal vez debas colocar el contenido en un marco iframe:

document.querySelector('#imprimir').addEventListener('click', e => {
    let content = document.querySelector('#impresion').innerHTML;
    let iframe = document.createElement('iframe');
    iframe.innerHTML = content;
    iframe.id = 'iframe-print';
    document.body.appendChild(iframe);
    window.frames['iframe-print'].focus();
    window.frames['iframe-print'].print();
});
<h1>Esto no se va a imprimir</h1>
<div id="impresion">Solo esto va a ser enviado a la impresora.</div>
<p>Más contenido</p>
<button id="imprimir">Imprimir</button>

Nota: Supongo que la plataforma bloquea la impresión del marco en fragmento de código para evitar abusos o ataques.

Los problemas de esta propuesta son:

  1. Tendrás que armar un HTML completo y correcto, incluyendo estilos para que se imprima correctamente
  2. Probablemente se requiera mostrar previamente el marco y esperar otra acción del usuario (clic en otro botón) para poder imprimir, tal vez el navegador bloquee la opción hasta que haya otra acción del usuario
  3. No hay posibilidad de saber en qué momento se realiza o cancela la impresión para eliminar el marco, lo que nos lleva al punto anterior

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.