web-dev-qa-db-fra.com

Comment imprimer l'intégralité du modal bootstrap lorsque le contenu du corps du modal est défilé hors de la vue

Le problème est que l'utilisateur doit faire défiler l'écran pour voir tout le contenu du corps modal. Cependant, lorsque j'imprime le modal, seule la partie visible est celle qui est imprimée. Je veux que tout le contenu du modal soit imprimé. J'ai essayé tous les codes de la page suivante et aucun d’entre eux n’imprime le modal en entier. 

Twitter Bootstrap: Imprimer le contenu de la fenêtre modale

javascriptjquerytwitter-bootstrapprintingbootstrap-modal
13
Abu Sulaiman

Téléchargez printThis.js à partir du lien suivant et intégrez-le dans votre html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Enveloppez le contenu que vous souhaitez imprimer avec le div suivant. Tout ce qui est en dehors de cette division ne sera pas imprimé.

<div id="modalDiv">
    ..content to print..
</div>

Appelez la requête suivante pour imprimer tout le contenu, y compris le contenu non visible. Vous pouvez inclure vos fichiers CSS dans un tableau si vous avez plusieurs fichiers 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          
});
13
Abu Sulaiman

Était confronté au même problème avec la bibliothèque d'amorçage de l'interface utilisateur angularjs. J'ai essayé le lien fourni ci-dessus mais pas de chance. Le seul CSS qui fonctionne pour moi lorsque le modal estPLUS LONGque le port d'affichage est: 

@media print {
    .modal {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        overflow: visible!important;
    }
}

Remarque: position:absolute et overflow:visible sontMUSThave. J'espère que cela pourra également résoudre votre problème lors de l'impression de angularUI-Bootstrap-Modal. 

14
Leon li

Je pense que vous pouvez facilement le faire avec CSS en utilisant @media print:

S'il y a une fenêtre modale d'amorçage ouverte, le contenu en modal sera imprimé (il peut y avoir plus d'une page), sinon le contenu de la fenêtre.

@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 */
    }
}

Aussi, vous pouvez ajouter un bouton sur le pied de page de modal pour l'impression:

<div class="modal-footer">
    <button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
</div>
4
Taron Saribekyan

@Abu Sulaiman: L'utilisation de cette option n'imprime encore que la partie affichée dans le modal. Pour afficher également la partie masquée, en particulier lorsque votre contenu est saturé, modifiez le removeInline: truejust comme indiqué ci-dessous. Fonctionne bien pour moi.

Téléchargez printThis.js à partir du lien suivant et intégrez-le dans votre html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Enveloppez le contenu que vous souhaitez imprimer avec le div suivant. Tout ce qui est en dehors de cette division ne sera pas imprimé.

Appelez la requête suivante pour imprimer tout le contenu, y compris le contenu non visible. Vous pouvez inclure vos fichiers CSS dans un tableau si vous avez plusieurs fichiers CSS.

$("#modalDiv").printThis({ 
    debug: false,              
    importCSS: true,             
    importStyle: true,         
    printContainer: true,       
    loadCSS: "../css/style.css", 
    pageTitle: "My Modal",             
    removeInline: true,        
    printDelay: 333,            
    header: null,             
    formValues: true          
});
0
Emmajiugo