Tengo el siguiente CSS para mi estilo de impresión:Ocultar todos los elementos excepto uno div para imprimir
* {
display:none;
}
#printableArea {
display:block;
}
me esperaba esto para ocultar todos elementos, y sólo muestran la printableArea, sin embargo todo se oculto. En la vista de impresión, todo lo que obtengo es una página en blanco.
Lo tengo incluido correctamente en HEAD, con media="print" en esta hoja de estilos en particular.
Si no se muestra un elemento, no se mostrará ninguno de sus elementos secundarios (independientemente de la configuración de la propiedad de visualización).
* coincide con el elemento <html>, por lo que todo el documento está oculto.
Necesita ser más selectivo sobre lo que oculta.
html body * {
display:none;
}
#printableArea {
display:block;
}
Además, es posible que necesite un! Importante en #printableArea, pero probablemente no.
Esto solo funcionará si #printableArea es un hijo directo del cuerpo. –
Si desea utilizar JavaScript, puede intentar este sencillo fragmento que ni siquiera requiere jQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
esta acción reemplazará todo el HTML, no es un resultado requerido –
Usted puede tratar de hacer estallar para arriba encima de todo. Esto resolvió el 90% de mis problemas, entonces solo tuve que hacer una clase .noprint y agregarlo a algunos elementos desordenados.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
usted está tomando el enfoque general bien, pero que desea utilizar en lugar de visibility: hiddendisplay: none de manera que se puede establecer elementos secundarios para ser visible.
Ah, gracias! Supongo que podría simplemente colocar PrintableArea fuera del envoltorio de la página, luego ocultar el envoltorio, mostrando el div de impresión. – FatherCarbon
@FatherCarbon - eso es lo que acabo de implementar y parece que hará el truco muy bien – Michael12345