Как распечатать весь загрузочный модаль, где содержимое в модальном теле прокручивается вне поля зрения

Проблема заключается в том, что пользователю приходится прокручивать вниз, чтобы просмотреть весь контент в модальном теле. Однако, когда я печатаю модальный, единственная часть, которая напечатана, является частью, которую можно просмотреть. Я хочу, чтобы весь модальный контент был напечатан. Я пробовал каждый фрагмент кода на следующей странице, и ни один из них не печатает весь модальный.

Twitter Bootstrap: печать содержимого модального окна

Ответ 1

Загрузите 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

Столкнулась с той же проблемой с библиотекой бутстрапов UL. Пробовал ссылку, приведенную выше, но не повезло. Единственный CSS, который работает для меня, когда модальный LONGER, чем порт представления:

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

Примечание: position:absolute и overflow:visible имеют ДОЛЖЕН иметь. Надеюсь, это также может решить вашу проблему при печати углового UI-Bootstrap-Modal.

Ответ 3

Я думаю, вы можете легко сделать это с помощью CSS с помощью @media print:

Если открытое модальное окно 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>

Ответ 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          
});