Question

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

Twitter Bootstrap: Print content of modal window

Answer 1

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

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

5 个答案: