css 打印媒体查询仅打印第一页

Question

我使用 Print Media Query 在我的网页上打印一个可滚动的 DIV（主 DIV 包含一个子 DIV 和带有多行和来自剑道网格的自定义样式的表）。 window.Print() 只在 IE 9 和 Chrome 中打印一页，切割其余的 DIV 内容。 我如何确保它在多个页面中打印所有内容。 我阅读了有关 Firefox 问题的类似帖子，但使用 overflow: visible !important 的解决方案对我不起作用。 下面是我的风格

注意：我尝试过 position: absolute, height/width: 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

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

@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

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> 

Answer 3

我现在遇到了同样的问题，几乎尝试了所有方法（清除浮动、避免绝对定位、添加溢出等），但没有任何效果。

然后我找到了一个修复方法，很简单，它很痛：

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

---

我认为这可能是仅适用于某些边缘情况的解决方案，但是由于我之前在搜索并摆弄许多非工作解决方案时没有找到此解决方案，因此我认为至少应该为不工作的人提及它不要用“通常的技巧”来解决它。

Answer 4

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

在打印预览模式下使用 Chrome 的元素检查器？

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

Answer 5

尝试了上面提到的所有内容，但是firefox浏览器仍然仅显示一页，而在页脚中则显示第1页（共1页）。