Come stampare l'intero modal bootstrap in cui il contenuto del corpo modale viene scostato dalla vista

Question

Il problema è che l'utente deve scorrere verso il basso per visualizzare tutto il contenuto all'interno del corpo modale. Tuttavia, quando stampo il modale, l'unica parte stampata è la parte visibile. Voglio che l'intero contenuto del modale sia stampato. Ho provato ogni pezzo di codice nella pagina seguente e nessuno di loro stampa l'intero modal.

Twitter Bootstrap: Print content of modal window

Answer 1

Scarica printThis.js dal seguente link per inserire nel tuo html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Avvolgere il contenuto che si desidera stampare con il seguente div. Tutto al di fuori di questo div non verrà stampato.

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

Chiamare il seguente jQuery per stampare tutto il contenuto compreso il contenuto che non è visualizzabile. È possibile includere i file css in un array se si dispone di più file 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   
}); 

Answer 2

Penso che si può facilmente farlo con i CSS utilizzando @media print:

Se non ci si apre finestra modale bootstrap, sarà stampato il contenuto di modali (che può essere più di una pagina), in altri casi contenuto della finestra.

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

Inoltre pulsante è possibile aggiungere il piè di pagina modale per la stampa:

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

Answer 3

stava affrontando lo stesso problema con angularjs biblioteca UI bootstrap. Ho provato il collegamento fornito sopra ma senza fortuna. L'unica CSS che funziona per me quando il modale è PIU ' rispetto alla porta di vista è:

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

Nota: position:absolute e overflow:visible sono MUST hanno. Spero che questo possa risolvere il tuo problema anche durante la stampa di angularUI-Bootstrap-Modal.

Answer 4

@Abu Sulaiman: utilizzando questo si stampa solo la parte visualizzata nel modale. Per mostrare anche la parte nascosta, specialmente quando il tuo contenuto è in overflow, cambia lo removeInline: true esattamente come indicato di seguito. Funziona bene per me.

Scarica printThis.js dal seguente link per inserire nel tuo html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Avvolgere il contenuto che si desidera stampare con il seguente div. Tutto al di fuori di questo div non verrà stampato.

..content per stampare ..

chiamare il seguente jquery per stampare tutto il contenuto compreso il contenuto che non è visualizzabile. È possibile includere i file css in un array se si dispone di più file 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   
});