我正在开发该项目的新版本,但是打印CSS样式存在一些问题。
这里是旧项目:
https://www.traffwebdemo.co.uk/parking/main.html
要打印的步骤:
单击扳手按钮->打印机按钮->选择模板,将打开一个模态,然后您可以在两个方向上进行打印,这是通过iframe和2个CSS的混合完成的,其中一个在主项目中,另一个在其中在iframe本身中。
css打印会隐藏所有内容,并在打印时仅显示模式内容,因此,如果尝试直接在主页上打印,则只有白页。
由于地图的限制,我不再使用iframe,我仍在调用html模板,但随后将其主体克隆到模态中并再次摆脱iframe。
此处是新版本:
https://www.traffwebdev.uk/parking/test.html
该项目的两个版本都使用Bootstrap,但是旧版本调用了iframe并且我没有打印iframe引导程序,但是新方法摆脱了iframe,因此Bootstrap会干扰打印。
我在Chrome中的方向字段存在问题,在所有其他浏览器中都没有第二页,但是在深入研究Bootstrap问题后,我发现可以解决此问题,并用CSS规则覆盖
@page {
size: auto
}
.flex-class {
display: block;
}
现在我在Firefox和Opera中拥有第二页,但是...不幸的是,我们的客户使用IE11 ...并且我在IE中没有第二页
如何在IE中打印两个页面?这些规则似乎被完全忽略了。
#pllegwrapper {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
#pagesplit {
display: block;
page-break-before: always !important;
break-before: page !important;
}
更新
我已将display: table
应用于包含两页的主div,现在可以在IE中打印,但不能在FF中打印。
答案 0 :(得分:0)
我设法用下面的代码解决问题,#printMod
是引导程序模式本身,我删除了所有flex属性并进行了浮动。
然后,我将display: table
应用于#printMod
和#printBody
,这最后一个是.modal-body
模态元素内的主要容器。
仅仅由于Bootstrap,就花了很长时间来修复它。
@media print {
@page {
size: auto;
}
body {
margin:0 !important;
padding:0 !important;
height:100% !important;
width: 100% !important;
}
body * {
visibility: hidden;
}
#printMod,
#printMod * {
visibility: visible;
float: none;
display: block;
flex: none !important;
}
#printBody {
display: table !important;
margin: auto !important;
}
#printMod {
& {
display: table !important;
position: absolute;
left: 0;
top: 0;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
break-inside: auto;
border: none !important;
overflow: visible !important;
}
.modal-header,
.modal-footer {
display: none;
border: none !important;
}
.modal-dialog,
.modal-content,
.modal-body {
display: block;
overflow: visible;
height: 100% !important;
max-height: 100% !important;
padding: 0;
border: none !important;
}
#plwrapper,
#pllegwrapper {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
#pagesplit {
display: block;
page-break-before: always !important;
break-before: page !important;
}
}
}
答案 1 :(得分: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;
}