Contenu de l'impression d'un popup modal

Question

J'ai une application qui affiche une liste d'éléments.

L'utilisateur peut cliquer sur un élément et voir ses détails dans un popup modal (DIV centré, affiché en JavaScript). Je dois avoir un bouton sur ce popup qui permettra à l'utilisateur d'imprimer le contenu de la popup modale seulement.

Ceci est destiné à une application interne qui ne doit fonctionner que dans IE7 +. Lorsque l'utilisateur clique sur le bouton d'impression de la fenêtre contextuelle modale, l'état de l'élément devient "imprimé" (pour des raisons internes de gestion ...). J'utilise ASP.NET et le ASP.NET AJAX Control Toolkit ModalPopupExtender, mais je suppose que la technique pour y parvenir sera centrée sur le navigateur, et la technologie du serveur agnostique.

Answer 1

Vous pouvez ajouter un nom de classe 'noprint' à un conteneur div contenant tout ce que vous ne souhaitez pas imprimer. Si vous souhaitez que la page principale soit imprimable sans la boîte de dialogue, vous pouvez ajouter le nom de la classe à l'enveloppe DIV lorsque l'utilisateur appuie sur le bouton PRINT et supprimer le nom de la classe après.

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

Answer 2

Vous pouvez rediriger vers une page imprimable contenant le contenu de la fenêtre contextuelle modale. Assurez-vous que la page a window.print() dans l'événement load. Une fois que votre utilisateur atteint cette page, vous pouvez simplement signaler cela. Que se passerait-il si l'utilisateur arrivait là et annulerait l'impression?

Answer 3

Essayez cette

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(); 
} 

Cela affichera le contenu dans une autre fenêtre en utilisant vos feuilles de style

Answer 4

Pour rendre le contenu popup avec un style différent (par exemple, non centrée, largeur 100%) Je mets à jour dynamiquement la position de _foregroundElement (le PopupControlID) et _backgroundElement (créé par l'extenseur de popup) sur l'impression.

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(); 
    } 

Note: Ne fonctionne pas avec le bouton d'impression du navigateur.