css 打印媒体查询只打印第一页答案

【问题标题】：css print media query prints only first pagecss 打印媒体查询只打印第一页
【发布时间】：2023-03-27 12:48:01
【问题描述】：

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

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

【问题讨论】：

我想出了一个替代解决方案，它只是打开一个新窗口，将 HTML 填充到其中，然后打印出来。对我来说很好。

标签： html css printing

【解决方案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;
}

【讨论】：

包括高度没有影响。
好的，让我试试。您可以在某处发布此示例代码吗？需要更多上下文
这是小提琴jsfiddle.net/iamraja/bsbbq248。正文的内容很长，以至于跨越多个页面。但是，打印只打印一页。
删除位置后，上面的小提琴上的打印工作正常：已修复；属性。但在我的实际打印中，我需要将 div 中的网格/表格与页面左侧对齐。此外，即使没有位置属性，它仍然会打印一页。由于安全原因，我无法包含原始代码。有什么想法吗？
在我的原始代码中，没有
。这只是一张有几个 tr 的长表。如何申请休息？另外，当有多个@media 打印样式时会发生什么？（即项目中使用的每个 3rd 方组件一个）

【解决方案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>

【讨论】：

* { overflow: visible !important; } 对我的情况有所帮助，谢谢！
它对我也有帮助，但我不必将内容分成多个 div 标签，每页一个..

【解决方案3】：

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

然后我找到了一个解决方法，很简单：

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

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

【讨论】：

【解决方案4】：

您可以强制 Chrome 模拟“打印”模式，这使得解决这些棘手的@media print 问题更加更容易：

Using Chrome's Element Inspector in Print Preview Mode?

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

【讨论】：