CSS打印媒体查询仅首页

问题描述 投票:0回答:4

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"));`

以此,您可以在重新启动后保留与页面上的控件关联的客户端事件。
    

尝试这个: 编辑:使用“绝对位置”。意识到该位置:修复仅创建一个页面,因为那是它的工作原理(您不能用位置滚动:固定)。绝对做同样的事情,但可以扩展。
html css printing
4个回答
31
投票

CSS

28
投票

@media print { * { overflow: visible !important; } .page { page-break-after:always; } }

html


<div> <div class="page"> Page 1 Contents </div> <div class="page"> Page 2 Contents </div> </div>

我现在遇到了同样的问题,几乎尝试了所有内容(清除浮子,避免绝对定位,添加溢出,...)没有任何效果。
然后我找到了一个修复程序,很简单,以至于很痛:

15
投票
body, #main-container { height: auto; }

我认为这可能仅是某些边缘案例的解决方案,但是由于我以前搜索并摆弄了许多非工作溶液时,我没有找到该解决方案,我认为至少应该对人们提及。这不会使它与“通常的提示”一起使用

您可以强迫Chrome效仿“打印”模式,这使得它更容易解决这些挑剔的问题:

在打印预览模式下使用Chrome的Element Inspector?


3
投票
启用它,您可以随时更改CSS的CSS,并查看对您有用的功能。

aanswer op添加了问题:

我终于通过从DOM读取的方式来打印。如果对某人有帮助
@media print

以此,您可以在重新启动后保留与页面上的控件关联的客户端事件。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.