使用 JS 和 @media print CSS 打印，但内容被下推

Question

我在打印预览中的内容 window 向下显示了大约 5 或 6 行。

由于我已经处理了高度、边距和填充，所以我不确定是什么原因导致它下降。我无法使用 inspect 检查，因为它在打印预览中 window。我只是在尝试一些事情，所以不要着急。如果我弄明白了，我会post回答。

JS - 从 onclick() 调用；

function print1() {
    window.print();
}

CSS

    @media print{
    body *:not(#OFP_here){
        visibility: hidden;
        height:0px;
        margin: 0px; 
        padding: 0px;            
    }

更新：3 行是由于 JS 构建的 table，尽管我已经在@media 中解释了 table。

Answer 1

您需要定位 @page，这将修改全局页面设置。您可以在 MDN

阅读更多相关信息

@page

The @page CSS at-rule is used to modify some CSS properties when printing a document.

Syntax
@page {
  margin: 1cm;
}

Answer 2

visibility: hidden; 将“隐藏”那些元素，因为它们的内容是隐藏的。但是他们在没有该规则的情况下占据的 space 仍然显示为空 space，我想这就是你所指的。

改用display: none，这实际上会隐藏受影响的元素并且不会留下任何空白space。

使用 JS 和 @media print CSS 打印，但内容被下推

Printing using JS and @media print CSS but content pushed down

css

media-queries

@page

Syntax