html页面打印功能js代码怎么写

涛哥
Html代码

要在HTML页面中添加打印功能，可以使用JavaScript编写代码，实现如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>打印页面示例</title>
    <script>
        function printPage() {
            window.print(); // 调用window.print()方法打印当前页面
        }
    </script>
</head>
<body>
    <h1>打印页面示例</h1>
    <p>这是一个打印页面示例，您可以点击下面的按钮进行打印。</p>
    <button onclick="printPage()">打印</button>
</body>
</html>

这段代码中，我们定义了一个printPage()函数，该函数会调用window.print()方法来实现打印功能。在页面中添加一个按钮，当用户点击该按钮时，会触发printPage()函数，从而实现打印功能。

需要注意的是，window.print()方法会调用浏览器的打印功能，弹出打印对话框，让用户选择打印机、设置打印选项等等。

因此，当用户点击打印按钮时，可能会出现一些提示信息，让用户确认是否需要打印当前页面。 如果需要在打印页面中隐藏某些元素，可以通过CSS样式来实现。例如，可以在CSS文件中添加如下代码：

@media print {
    /* 隐藏所有class为hidden的元素 */
    .hidden {
        display: none;
    }
}

这段代码会在打印页面中隐藏所有class为“hidden”的元素。在HTML页面中，只需要给需要隐藏的元素添加class="hidden"属性即可。

 
  • 打印功能
  • 样式
  • JavaScript