I使用Print Media查询在我的网页上打印可滚动的Div(Main Div包含一个子和表格,带有Kendo Grid的几行和自定义样式)。 window.print()仅在IE 9和Chrome Chop copl剩下的Div内容中仅打印一页。我如何确保它在多个页面中打印所有内容。我读了类似的firefox问题,但是使用溢出的解决方案:可见!重要的是我不起作用。下面是我的风格
注:我尝试了位置:绝对,高度/宽度:100%和设置与表,Tbody,TR和TD相同的设置,但无用。
@media print {
body * {
visibility: hidden;
}
#divname, #divname* {
visibility: visible;
}
#divname
{
overflow: visible !important;
float:none !important;
position: fixed;
left: 0px;
top: 0px;
display:block !important;
/*height:auto !important;*/
}
}
Edit:我终于通过从DOM读取以下内容来打印。如果对某人有帮助
`//get DIV content as clone
var divContents = $("#DIVNAME").clone();
//detatch DOM body
var body = $("body").detach();
//create new body to hold just the DIV contents
document.body = document.createElement("body");
//add DIV content to body
divContents.appendTo($("body"));
//print body
window.print();
//remove body with DIV content
$("html body").remove();
//attach original body
body.appendTo($("html"));`
以此,您可以在重新启动后保留与页面上的控件关联的客户端事件。
尝试这个: 编辑:使用“绝对位置”。意识到该位置:修复仅创建一个页面,因为那是它的工作原理(您不能用位置滚动:固定)。绝对做同样的事情,但可以扩展。
CSS
@media print {
* { overflow: visible !important; }
.page { page-break-after:always; }
}
<div>
<div class="page">
Page 1 Contents
</div>
<div class="page">
Page 2 Contents
</div>
</div>
我现在遇到了同样的问题,几乎尝试了所有内容(清除浮子,避免绝对定位,添加溢出,...)没有任何效果。然后我找到了一个修复程序,很简单,以至于很痛:
body, #main-container {
height: auto;
}
我认为这可能仅是某些边缘案例的解决方案,但是由于我以前搜索并摆弄了许多非工作溶液时,我没有找到该解决方案,我认为至少应该对人们提及。这不会使它与“通常的提示”一起使用
。
在打印预览模式下使用Chrome的Element Inspector?