it-swarm.com.ru

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

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

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

13
Abu Sulaiman

Загрузите файл 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          
}); 
13
Abu Sulaiman

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

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

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

14
Leon li

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

Если открыто модальное окно начальной загрузки, будет напечатано содержимое модальной страницы (это может быть более одной страницы), в противном случае содержимое окна.

@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
Taron Saribekyan

@Abu Sulaiman: при использовании этого по-прежнему распечатывается только та часть, которая отображается в модале. Чтобы также показать скрытую часть, особенно когда ваш контент переполнен, измените removeInline: truejust, как сделано ниже. У меня отлично работает.

Загрузите файл 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          
});
0
Emmajiugo