Skip to main content
Agregar posible opción con iframe
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

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

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>

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
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

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>