Question

我使用Print Media Query在我的网页上打印可滚动的DIV（主DIV包含一个子DIV和带有多行的表和来自kendo网格的自定义样式）。 window.Print（）仅在IE 9和Chrome中打印一页，其中包括DIV内容的其余部分。我如何确保它在多个页面中打印所有内容。我在Firefox上看过类似的帖子，但使用overflow：visible！important的解决方案对我来说并不适用。以下是我的风格

注意：我已尝试使用位置：绝对值，高度/宽度：100％并为Table，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;*/
    }
}

编辑：我终于设法通过读取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"));`

这样，您可以在重新绑定后保留与页面上控件关联的客户端事件。

Answer 1

试试这个：编辑：使用绝对位置。意识到这个位置：固定只创建一个页面，因为它是如何工作的（你不能用位置滚动：固定）。绝对做同样的事情，但可以扩展。

@media print {
    body * {
        visibility: hidden;
    }
    #divname, #divname * {
        visibility: visible;
    }
    #divname {
        left: 0px;
        top: 0px;
        position:absolute;
    }
    p {
        page-break-before: always;
    }
}
.para {
    font-size:x-large;
    height:3000px;
}

Answer 2

我现在遇到同样的问题并尝试了几乎所有事情（清除浮动，避免绝对定位，添加溢出，......）而没有任何影响。

然后我找到了一个修复，就像它伤害一样简单：

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

我认为这可能只是针对某些边缘案例的解决方案，但是当我之前搜索并摆弄许多非工作解决方案时我没有找到这个解决方案，我认为它应该至少要提到那些没有使用＆＃34;常用提示＆＃34; 的人。

Answer 3

您可以强制 Chrome 模拟“打印”模式，从而更轻松地解决这些棘手的 @media print 问题：

Using Chrome's Element Inspector in Print Preview Mode?

启用后，您可以即时更改打印视图的 CSS，看看哪些对您有用。

Answer 4

CSS

@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>

css打印介质查询仅打印第一页

4 个答案: