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:
- Tendrás que armar un HTML completo y correcto, incluyendo estilos para que se imprima correctamente
- 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
- 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