问题是用户必须向下滚动才能查看模态体内的所有内容。但是,当我打印模态时,唯一打印的部分是可查看的部分。我想要打印整个模态的内容。我已经尝试了下一页的每一段代码,但没有一段代码打印出整个模态。
答案 0 :(得分:15)
与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时解决您的问题。
答案 1 :(得分:13)
从以下链接下载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 :(得分:4)
我认为您可以使用@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>
答案 3 :(得分:0)
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
});
答案 4 :(得分:0)
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;
}