如何在我的网站上添加打印按钮 - Javascript (1)

📌 相关文章

📜 如何在我的网站上添加打印按钮 - Javascript (1)

📅 最后修改于: 2023-12-03 14:52:55.869000 🧑 作者: Mango

如何在我的网站上添加打印按钮 - JavaScript

在网站中添加打印按钮可以使用户方便地将网页内容打印出来。以下是一种使用 JavaScript 的方法来在网站中添加打印按钮。

HTML 结构

首先，在你的网站的 HTML 文件中添加一个按钮元素，用于触发打印功能。

<button id="print-btn">打印</button>

JavaScript 代码

使用 JavaScript 来为按钮添加点击事件，事件触发时执行打印功能。

// 获取打印按钮元素
var printButton = document.getElementById("print-btn");

// 为按钮添加点击事件
printButton.addEventListener("click", function() {
  window.print();
});

在上述代码中，window.print() 是一个浏览器内置的 JavaScript 函数，它会弹出打印对话框并将当前网页的内容打印出来。

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>我的网站</title>
  <style>
    /* 添加一些样式来隐藏按钮在打印预览中的显示 */
    @media print {
      #print-btn {
        display: none;
      }
    }
  </style>
</head>
<body>
  
  <!-- 打印按钮 -->
  <button id="print-btn">打印</button>

  <!-- 其他网页内容... -->

  <script>
    // 获取打印按钮元素
    var printButton = document.getElementById("print-btn");

    // 为按钮添加点击事件
    printButton.addEventListener("click", function() {
      window.print();
    });
  </script>
</body>
</html>

在上面的示例中，我们还添加了一些 CSS 样式，用于在打印预览中隐藏打印按钮。这是因为打印预览中通常不需要显示打印按钮。