css - print - ventana modal javascript

Imprimir contenido de una ventana emergente modal

Question

Tengo una aplicación que muestra una lista de elementos.

El usuario puede hacer clic en un elemento y ver sus detalles en un menú emergente modal (DIV centrado, que se muestra con JavaScript). Necesito tener un botón en esa ventana emergente que permita al usuario imprimir los contenidos del menú emergente modal solamente.

Esto es para una aplicación interna que necesita funcionar solo en IE7 +. Cuando el usuario hace clic en el botón Imprimir en la ventana emergente modal, el estado del elemento cambia a "impreso" (por razones comerciales internas ...).

Estoy usando ASP.NET y el kit de herramientas de control ASP.NET AJAX ModalPopupExtender , pero supongo que la técnica para lograr esto estará centrada en el navegador y la tecnología del servidor será independiente.

Answer 1

Podría agregar un nombre de clase ''noprint'' a un div que envuelva todo lo que no desea imprimir.

Si también desea que la página principal se pueda imprimir sin el cuadro de diálogo, puede agregar el nombre de la clase al contenedor DIV cuando el usuario presione el botón IMPRIMIR y luego elimine el nombre de la clase.

@media print {
.noprint {
display:none
}
}

Answer 2

Puede redirigir a una página imprimible que tenga el contenido de la ventana emergente modal. Asegúrese de que la página tenga window.print () en el evento de carga. Una vez que su usuario llega a esa página, puede marcar eso.

¿Qué pasaría si el usuario llega y cancela la impresión?

Answer 3

Prueba esto

function PrintContent() {
var DocumentContainer = document.getElementById(''nameofDiv'');
var WindowObject = window.open("", "PrintWindow",
"width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.write();
WindowObject.document.write(''<link rel="stylesheet" type="text/css" href="path-to-my-stylesheet.css">'')
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}

Esto imprimirá los contenidos en otra ventana usando tus hojas de estilo

Answer 4

Para representar el contenido emergente con un estilo diferente (por ejemplo, no centrado, ancho del 100%) actualizo dinámicamente la posición de _foregroundElement (PopupControlID) y _backgroundElement (creado por el extensor emergente) en la impresión.

var basePrint = window.print;
window.print = function() {
var popup = $find( ''<%= [PopupExtenderID].ClientID %>'' );
popup._backgroundElement.style.position = ''static'';
popup._foregroundElement.style.position = ''static'';
popup._layout();
basePrint();
// Restore settings for display
popup._backgroundElement.style.position = ''fixed'';
popup._foregroundElement.style.position = ''fixed'';
popup._layout();
}

Nota: no funcionará con el botón de impresión del navegador.