如何打印整个 bootstrap 模态，其中模态正文中的内容滚出视图

Question

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

Twitter Bootstrap: Print content of modal window

Answer 1

从以下 link 下载 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 2

我认为您可以通过 CSS 使用 @media print:

轻松做到这一点

如果打开了bootstrap模态window，则打印模态的内容（可以多一页），否则为window的内容。

@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 3

angularjs UI bootstrap 库也面临同样的问题。尝试了上面提供的 link 但没有成功。当模态比视口长时，唯一对我有用的 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 4

@Abu Sulaiman：使用它仍然只打印出模态中显示的部分。要同时显示隐藏部分，尤其是当您的内容溢出时，请更改 removeInline: true，如下所示。适合我。

从以下 link 下载 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;
          }

如何打印整个 bootstrap 模态，其中模态正文中的内容滚出视图

How do I print the entire bootstrap modal where content in modal body is scrolled out of view

javascript

printing

jquery

twitter-bootstrap

bootstrap-modal