试图让印刷适用于Modals.
在最新的谷歌浏览器中,使用最新的angular-ui-bootstrap 0.14.2,我们在列表或表格等大型内容溢出到下一页时遇到问题.
我已经做了必要的更改来隐藏背景对象：
将以下样式添加到模式页面中：
@media print {
body * {
visibility: hidden;
}
#print-content * {
visibility: visible;
overflow: visible;
}
#mainPage * {
display: none;
}
.modal {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
min-height: 550px;
}
li {
page-break-after: auto;
}
}
Plunker：
http://plnkr.co/edit/TV0ttEAw4LWJ6sGLjSTR?p=preview
您可以测试不同模态的打印预览和打印按钮.
打印预览适用于当前页面,但不适用于模态. =(
解决方法
我发现CSS中的可见性和溢出属性存在问题.
@media print {
.modal {
visibility: visible;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
.modal-dialog {
visibility: visible !important;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
}
转到更新的plunkler：http://plnkr.co/edit/TV0ttEAw4LWJ6sGLjSTR?p=preview
单击包含50个项目的大型模态,然后单击打印,您可以将内容很好地传递到第二页. NICE！
打印Modal溢出问题：
固定溢出后打印模态问题：
