Posteriormente a consultar expertos en el tema, programadores de diversas áreas y profesores dimos con la respuesta al dilema y la plasmamos en esta publicación.
Solución:
Estaba enfrentando el mismo problema con la biblioteca de arranque de interfaz de usuario de angularjs. Intenté el enlace proporcionado arriba pero no tuve suerte. El único CSS que me funciona cuando el modal es MÁS EXTENSO que el puerto de vista es:
@media print
.modal
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
overflow: visible!important;
Nota: position:absolute y overflow:visible son DEBER tener. Espero que esto también pueda resolver su problema al imprimir angularUI-Bootstrap-Modal.
Descargue printThis.js desde el siguiente enlace e inclúyalo en su html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js
Envuelva el contenido que desea imprimir con el siguiente div. Todo lo que esté fuera de este div no se imprimirá.
..content to print..
Llame al siguiente jquery para imprimir todo el contenido, incluido el contenido que no se puede ver. Puede incluir sus archivos css en un array si tiene varios archivos css.
$("#modalDiv").printThis(
debug: false,
importCSS: true,
importStyle: true,
printContainer: true,
loadCSS: "../css/style.css",
pageTitle: "My Modal",
removeInline: false,
printDelay: 333,
header: null,
formValues: true
);
Creo que puedes hacer eso fácilmente con CSS usando @media print:
Si hay una ventana modal de arranque abierta, se imprimirá el contenido del modal (puede ser más de una página), en otro caso, el contenido de la ventana.
@media print
/* on modal open bootstrap adds class "modal-open" to body, so you can handle that case and hide body */
body.modal-open
visibility: hidden;
body.modal-open .modal .modal-header,
body.modal-open .modal .modal-body
visibility: visible; /* make visible modal body and header */
También puede agregar un botón en el pie de página de modal para imprimir: