it-swarm.com.de

Wie drucke ich das gesamte Bootstrap-Modal, bei dem der Inhalt im modalen Hauptteil außer Sichtweite gerollt wird?

Das Problem ist, dass der Benutzer nach unten scrollen muss, um den gesamten Inhalt des modalen Körpers anzuzeigen. Beim Drucken des Modals wird jedoch nur der sichtbare Teil gedruckt. Ich möchte, dass der gesamte Inhalt des Modals gedruckt wird. Ich habe jeden Code auf der folgenden Seite ausprobiert und keiner von ihnen druckt das gesamte Modal aus. 

Twitter Bootstrap: Inhalt des Modalfensters drucken

13
Abu Sulaiman

Laden Sie printThis.js unter folgendem Link herunter und fügen Sie es in Ihre HTML-Datei ein: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Packen Sie den zu druckenden Inhalt mit dem folgenden div ein. Alles außerhalb dieses Bereichs wird nicht gedruckt.

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

Rufen Sie die folgende Jquery auf, um den gesamten Inhalt einschließlich des nicht sichtbaren Inhalts zu drucken. Sie können Ihre CSS-Dateien in ein Array aufnehmen, wenn Sie mehrere CSS-Dateien haben.

$("#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

Vor dem gleichen Problem stand die Bootstrap-Bibliothek von anglejs. Versuchte den oben angegebenen Link, aber kein Glück. Das einzige CSS, das für mich geeignet ist, wenn der ModalL&AUML;NGERist als der Ansichts-Port: 

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

Hinweis: position:absolute und overflow:visible sindM&UUML;SSENhaben. Ich hoffe, das könnte auch Ihr Problem beim Drucken von angleUI-Bootstrap-Modal lösen. 

14
Leon li

Ich denke, das geht mit CSS mit @media print:

Wenn ein modales Bootstrap-Fenster geöffnet ist, wird der Inhalt des Modal-Moduls gedruckt (dies kann mehr als eine Seite sein), in anderen Fällen wird der Fensterinhalt angezeigt.

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

Sie können auch eine Schaltfläche in der Fußzeile des Modals zum Drucken hinzufügen:

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

@Abu Sulaiman: Mit dieser Option wird nur der Teil gedruckt, der im Modal angezeigt wird. Um auch den verborgenen Teil anzuzeigen, insbesondere wenn Ihr Inhalt überläuft, ändern Sie den removeInline: truejust wie unten beschrieben. Funktioniert gut für mich.

Laden Sie printThis.js unter folgendem Link herunter und fügen Sie es in Ihre HTML-Datei ein: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Packen Sie den zu druckenden Inhalt mit dem folgenden div ein. Alles außerhalb dieses Bereichs wird nicht gedruckt.

Rufen Sie die folgende Jquery auf, um den gesamten Inhalt einschließlich des nicht sichtbaren Inhalts zu drucken. Sie können Ihre CSS-Dateien in ein Array aufnehmen, wenn Sie mehrere CSS-Dateien haben.

$("#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