window.print()打印html网页的两种方法实现

2023年5月28日上午6:37 • JavaScript

当我们在网页中呈现出需要打印的内容时，有时会需要将这些内容打印出来，在这时，我们可以使用 JavaScript 中的 window.print() 方法来实现网页打印功能。本篇文章将详细讲解“window.print()打印html网页的两种方法实现”的完整攻略。

一、使用 window.print() 方法实现网页打印功能

window.print() 方法是 JavaScript 中用来实现打印功能的方法，它可以使浏览器打印当前页面或指定页面的内容。该方法无需传递任何参数，只需要在需要打印的地方调用该方法即可。

// 当点击 id 为 print-button 的元素时，触发打印功能
document.getElementById('print-button').addEventListener('click', function() {
  window.print();
});

二、使用 CSS 中的 @media Print 实现网页打印样式定制

在默认情况下，打印出来的网页可能不是理想的。为此，我们可以使用 CSS 中的 @media Print 标签来为打印样式单独定制样式。使用该标签时，需要注意以下几点：

@media Print 标签中的样式只会在打印时生效，不会影响网页正常显示；
打印样式应当排版得更为简洁、明朗，并且避免使用图片、脚本等影响打印效果的元素。

下面是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>使用 CSS 中的 @media Print 实现网页打印样式定制</title>
  <style type="text/css">
    /* 打印样式 */
    @media Print {
      body {
        font-size: 18px;
      }
      h1 {
        font-size: 32px;
        text-align: center;
      }
      p {
        margin: 30px 0 0 0;
      }
    }

    /* 屏幕样式 */
    @media Screen {
      body {
        font-size: 16px;
      }
      h1 {
        font-size: 28px;
        text-align: center;
      }
      p {
        margin: 20px 0 0 0;
      }
    }
  </style>
</head>
<body>
  <h1>使用 CSS 中的 @media Print 实现网页打印样式定制</h1>
  <p>在默认情况下，打印出来的网页可能不是理想的。为此，我们可以使用 CSS 中的 @media Print 标签来为打印样式单独定制样式。</p>
  <p>大家可以试试直接打印本页面，看看效果有什么变化。</p>
</body>
</html>

在这个示例中，我们通过 @media Print 定义了打印时的样式，其中 body 中的 font-size 设为 18px，h1 中的 font-size 设为 32px，并且定制了 p 的边距。在 @media Screen 中，则定义了屏幕样式的 CSS。