如何打印整个引导模式,其中模态体中的内容滚动出视图

时间:2015-04-07 01:56:59

标签: javascript jquery twitter-bootstrap printing bootstrap-modal

问题是用户必须向下滚动才能查看模态体内的所有内容。但是,当我打印模态时,唯一打印的部分是可查看的部分。我想要打印整个模态的内容。我已经尝试了下一页的每一段代码,但没有一段代码打印出整个模态。

Twitter Bootstrap: Print content of modal window

5 个答案:

答案 0 :(得分:15)

与angularjs UI bootstrap库面临同样的问题。试过上面提供的链接,但没有运气。当模式 LONGER 而不是视口时,唯一适用于我的CSS是:

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

注意:position:absoluteoverflow:visible 必须。 希望这也可以在打印angularUI-Bootstrap-Modal时解决您的问题。

答案 1 :(得分:13)

从以下链接下载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          
}); 

答案 2 :(得分:4)

我认为您可以使用@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>

答案 3 :(得分:0)

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

答案 4 :(得分:0)

http://plnkr.co/edit/fspygnqWhsosqDTds0Og?p=preview

/**Modal Styles for Print**/

        @media print {
          body * {
            visibility: hidden;
          }
          #print-content * {
            visibility: visible;
            overflow: visible;
          }
          #mainPage * {
            display: none;
          }
          .modal {
            margin: 0;
            padding: 0;
            min-height: 550px;
            visibility: visible;
            /**Remove scrollbar for printing.**/
            overflow: visible !important;
            position: relative;
          }
          .modal-dialog {
            visibility: visible !important;
            /**Remove scrollbar for printing.**/
            overflow: visible !important;
          }