如何添加按钮来打印 HTML 页面?

在您的 HTML 网页上添加一个"打印"按钮，点击后即可打印整个网页。这是一个相当简单的网页功能，只需使用一些 HTML 元素和纯 JavaScript 即可添加。

因此，让我们讨论一下实现此目的的方法。

方法

• 首先，添加一个 <input />标签。

• 将其 type 属性设置为"button"，并赋值。

• 然后为输入框分配一个"onclick"处理程序，该处理程序将使用 JavaScript 进行处理。

• 处理输入标签点击事件的函数如下所示 -

const handlePrint = () => {
    window.print();
}

此方法的完整代码如下 -

示例

<!DOCTYPE html>
<html lang="en-US">
<head>
   <title>
  	   Adding Print Button
   </title>
</head>
   <body style="color: black;">
      <h1>Hello World!</h1>
      <p>Welcome to my Website</p>
      <p>
         This website is built using plain JS and HTML.
      </p>
      <p>
      Okay Bye!!!
      </p>
      <input value='Print' type='button' onclick='handlePrint()' />
      <script type="text/javascript">
         const handlePrint = () => {
            var actContents = document.body.innerHTML;
            document.body.innerHTML = actContents;
            window.print();
         }
      </script>
   </body>
</html>

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/