Javascript 如何打印整个 bootstrap 模态，其中模态正文中的内容被滚动到视图之外

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

提问by Abu Sulaiman

The problem is that the user has to scroll down to view all of the content within the modal body. However, when I print the modal the only part that is printed is the part that is viewable. I want the entire modal's content to be printed. I have tried every piece of code on the following page and none of them print the entire modal.

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

Twitter Bootstrap: Print content of modal window

Twitter Bootstrap：打印模态窗口的内容

采纳答案by Abu Sulaiman

Download printThis.js from the following link and include it in your html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

从以下链接下载 printThis.js 并将其包含在您的 html 中：https: //github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Wrap the content you want to print with the following div. Everything outside of this div will not be printed.

用下面的 div 包裹你要打印的内容。不会打印此 div 之外的所有内容。

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

Call the following jquery to print all the content including the content that is not viewable. You may include your css files in an array if you have multiple css files.

调用以下 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          
}); 

回答by LeOn - Han Li

Was facing the same issue with angularjs UI bootstrap library. Tried the link provided above but no luck. The only CSS that works for me when the modal is LONGERthan the view port is:

angularjs UI 引导库面临同样的问题。尝试了上面提供的链接，但没有运气。当模态比视口长时，唯一对我有用的CSS是：

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

Note: position:absoluteand overflow:visibleare MUSThave. Hope this could also solve your problem when printing angularUI-Bootstrap-Modal.

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

回答by Taron Saribekyan

I think you can easily do that with CSS using @media print:

我认为您可以使用 CSS 轻松做到这一点@media print：

If there is opened bootstrap modal window, will be printed content of modal (it can be more than one page), in other case content of window.

如果有打开的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 */
    }
}

Also you can add button on footer of modal for printing:

您也可以在模态页脚添加按钮进行打印：

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

回答by Emmajiugo

@Abu Sulaiman: Using this still prints out only the part showing in the modal. To also show the hidden part especially when your content is overflow, change the removeInline: truejust as done below. Works fine for me.

@Abu Sulaiman：使用它仍然只打印出模态中显示的部分。要同时显示隐藏部分，尤其是当您的内容溢出时，请removeInline: true按照以下操作更改。对我来说很好用。

Download printThis.js from the following link and include it in your html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

从以下链接下载 printThis.js 并将其包含在您的 html 中：https: //github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js

Wrap the content you want to print with the following div. Everything outside of this div will not be printed.

用下面的 div 包裹你要打印的内容。不会打印此 div 之外的所有内容。

..要打印的内容..

Call the following jquery to print all the content including the content that is not viewable. You may include your css files in an array if you have multiple css files.

调用以下 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          
});

回答by Ashok Damani

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

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