我在 modal
中有一个有效的 @media print
查询。然后我添加了一个也具有 PRINT 功能的图表。当我在图表中尝试 PRINT 时,它在 Chrome 打印对话框中没有显示任何内容。我认为这是因为 @media print
。
如何在我的图表
中添加与modal
相同的功能?
CSS 媒体打印:
@media print {
@page {
size: auto;
margin: 3mm;
margin-right: 57mm;
margin-left: 57mm
}
body * {
visibility: hidden;
}
#admissionSlip * {
visibility: visible;
overflow: visible;
}
#chart * {
visibility: visible;
overflow: visible;
}
#mainPage * {
display: none;
}
#printBtn {
display: none;
}
.modal {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
min-height: 550px;
visibility: visible;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
.modal-dialog {
visibility: visible !important;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
li {
page-break-after: auto;
}
/* Chart */
.panel {
visibility: visible !important;
/**Remove scrollbar for printing.**/
overflow: visible !important;
}
}
最佳答案
我用不太好的主意解决了它,但它满足了我的需要。
我将 chart
和 modal
的 media print
的 css
文件分开,并在每个 上引用它>html
文件。
我知道这不是一个好主意,也可能不是最佳做法,但它满足了我的需要。谢谢。
关于javascript - CSS 媒体打印查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46616622/