web-dev-qa-db-ja.com

bootstrapモーダル全体を印刷する方法

問題は、モーダルボディ内のすべてのコンテンツを表示するには、ユーザーが下にスクロールする必要があることです。ただし、モーダルを印刷すると、印刷される部分は表示可能な部分のみです。モーダル全体のコンテンツを印刷したい。次のページですべてのコードを試しましたが、モーダル全体を印刷するものはありません。

Twitter Bootstrap：モーダルウィンドウのコンテンツを印刷する

javascriptjquerytwitter-bootstrapprintingbootstrap-modal
15
Abu Sulaiman

次のリンクからprintThis.jsをダウンロードして、HTMLに含めます。 https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

印刷するコンテンツを次のdivでラップします。このdiv以外のすべては印刷されません。

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

次のjqueryを呼び出して、表示できないコンテンツを含むすべてのコンテンツを印刷します。複数のcssファイルがある場合は、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

Anglejs UI bootstrapライブラリで同じ問題に直面していました。上記のリンクを試してみましたが、運はありません。モーダルが[〜＃〜] longer [〜＃〜]ビューポートより：

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

注意： position:absoluteおよびoverflow:visible are [〜＃〜] must [〜＃〜] have。これにより、angularUI-Bootstrap-Modalを印刷する際の問題が解決されることを願っています。

18
LeOn - Han Li

@media printを使用してCSSで簡単にできると思います：

開いている場合bootstrap=モーダルウィンドウ、モーダルのコンテンツ（複数のページが可能）、その他の場合はウィンドウのコンテンツが印刷されます。

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

また、印刷用にモーダルのフッターにボタンを追加できます。

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

@Abu Sulaiman：これを使用しても、モーダルで表示されている部分のみが印刷されます。特にコンテンツがオーバーフローしているときに非表示部分も表示するには、removeInline: trueちょうど下のように。私にとってはうまくいきます。

次のリンクからprintThis.jsをダウンロードして、HTMLに含めます。 https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

印刷するコンテンツを次のdivでラップします。このdiv以外のすべては印刷されません。

次のjqueryを呼び出して、表示できないコンテンツを含むすべてのコンテンツを印刷します。複数のcssファイルがある場合は、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