js打印如何去掉页码

在打印网页内容时，去掉页码、页眉和页脚的核心方法是使用CSS、调整打印设置、使用JavaScript控制打印以及使用浏览器扩展。我们可以通过CSS样式表来控制打印页面的布局和内容，避免在打印时出现页码、页眉和页脚。

使用CSS控制打印页面布局：通过CSS的@media print规则，可以专门为打印设置样式。在这个规则中，我们可以隐藏特定的元素或者调整页面布局，从而去掉页码、页眉和页脚。

让我们详细讨论如何通过CSS、打印设置、JavaScript控制打印以及浏览器扩展实现这一目的。

一、使用CSS控制打印页面布局

CSS提供了一个专门为打印设置样式的规则@media print。通过这个规则，我们可以在用户打印页面时，控制页面的布局和显示内容。

1. 使用`@media print`隐藏页码、页眉和页脚

@media print {
    @page {
        margin: 0; /* 取消默认的页边距 */
    }
    body {
        margin: 1cm; /* 自定义页边距 */
    }
    header, footer {
        display: none; /* 隐藏页眉和页脚 */
    }
}

在这个例子中，我们通过设置@page的margin为0来取消默认的页边距，并且通过隐藏header和footer标签来去掉页眉和页脚。

2. 隐藏特定内容

有时候，我们可能只需要隐藏特定的内容，而不是整个页眉和页脚。可以通过指定特定的类或ID来隐藏这些内容：

@media print {
    .no-print {
        display: none; /* 隐藏所有带有.no-print类的元素 */
    }
}

在HTML中，只需给不想打印的内容添加no-print类：

<div class="no-print">
    这段内容不会出现在打印中。
</div>

二、调整打印设置

不同的浏览器和操作系统提供了不同的打印设置选项。大多数浏览器允许用户在打印对话框中选择是否打印页眉和页脚。

1. 在Chrome浏览器中

在Chrome浏览器中，用户可以在打印对话框中取消选择“页眉和页脚”选项：

打开打印对话框（Ctrl + P）。
在“更多设置”中找到“页眉和页脚”选项。
取消勾选“页眉和页脚”选项。

2. 在其他浏览器中

其他浏览器，如Firefox和Edge，也提供了类似的选项，可以在打印设置中取消页眉和页脚的打印。

三、使用JavaScript控制打印

通过JavaScript，我们可以动态控制打印的行为，例如在打印前隐藏特定内容，然后在打印后恢复。

1. 动态隐藏内容

在打印前隐藏特定内容，并在打印后恢复这些内容：

function beforePrint() {
    document.querySelectorAll('.no-print').forEach(function(element) {
        element.style.display = 'none';
    });
}
function afterPrint() {
    document.querySelectorAll('.no-print').forEach(function(element) {
        element.style.display = '';
    });
}
window.addEventListener('beforeprint', beforePrint);
window.addEventListener('afterprint', afterPrint);

在HTML中，只需给不想打印的内容添加no-print类：

<div class="no-print">
    这段内容不会出现在打印中。
</div>

四、使用浏览器扩展

一些浏览器扩展可以帮助用户在打印时去掉页码、页眉和页脚。这些扩展通常提供更多的控制选项和更方便的用户界面。

1. 推荐的浏览器扩展

Print Friendly & PDF：这个扩展允许用户在打印时删除不需要的内容，并提供了一个简洁的打印预览界面。
Print Edit WE：这个扩展允许用户在打印前编辑页面内容，从而去掉不需要的页码、页眉和页脚。

五、实际应用案例

为了更好地理解如何去掉打印页面中的页码、页眉和页脚，以下是一个实际应用案例。

1. 创建一个HTML页面

<!DOCTYPE html>
<html>
<head>
    <title>打印测试页面</title>
    <style>
        @media print {
            @page {
                margin: 0;
            }
            body {
                margin: 1cm;
            }
            .no-print {
                display: none;
            }
        }
    </style>
</head>
<body>
    <header class="no-print">
        <h1>这是页眉</h1>
    </header>
    <main>
        <p>这是主要内容</p>
    </main>
    <footer class="no-print">
        <p>这是页脚</p>
    </footer>
</body>
</html>

2. 使用JavaScript动态隐藏内容

<!DOCTYPE html>
<html>
<head>
    <title>打印测试页面</title>
    <style>
        @media print {
            @page {
                margin: 0;
            }
            body {
                margin: 1cm;
            }
            .no-print {
                display: none;
            }
        }
    </style>
    <script>
        function beforePrint() {
            document.querySelectorAll('.no-print').forEach(function(element) {
                element.style.display = 'none';
            });
        }
        function afterPrint() {
            document.querySelectorAll('.no-print').forEach(function(element) {
                element.style.display = '';
            });
        }
        window.addEventListener('beforeprint', beforePrint);
        window.addEventListener('afterprint', afterPrint);
    </script>
</head>
<body>
    <header class="no-print">
        <h1>这是页眉</h1>
    </header>
    <main>
        <p>这是主要内容</p>
    </main>
    <footer class="no-print">
        <p>这是页脚</p>
    </footer>
</body>
</html>

六、总结

通过使用CSS、调整打印设置、JavaScript控制打印以及浏览器扩展，我们可以灵活地控制打印页面的布局和内容，从而去掉页码、页眉和页脚。这些方法各有优劣，用户可以根据具体情况选择最适合的方法来实现打印时去掉页码、页眉和页脚的目的。

在实际应用中，合理地结合这些方法可以实现更好的打印效果，从而满足不同用户的需求。无论是通过CSS控制页面布局，还是通过JavaScript动态隐藏内容，亦或是使用浏览器扩展，都可以帮助用户在打印时获得更加清晰和整洁的页面。