如何在JavaScript中为HTML打印添加页眉和页脚

在许多情况下，用户在打印网页时希望能够在每一页上都包含统一的页眉和页脚。虽然HTML本身不直接支持打印时的页眉和页脚，但我们可以通过JavaScript和CSS结合起来实现这一功能。本文将为您介绍如何使用这两者来实现此功能。

实现思路

我们可以通过一个打印样式表来控制打印输出，并借助JavaScript动态生成页眉和页脚内容。通过在页面上创建一个隐藏的“打印”样式，我们可以在打印的时候展示特定的元素。

1. 创建HTML结构

首先，我们需要确保HTML文档中有一定的结构，以便于我们为页眉和页脚留出位置。以下是一个示例HTML：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>打印示例</title>
</head>
<body>
    <div id="content">
        打印内容
        <p>这里是打印的主要内容部分。</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. 添加CSS样式

接下来，我们需要为打印定义样式。在CSS中，我们可以使用 @media print 媒体查询来设置样式。

/* styles.css */
@media print {
    body {
        margin: 0;
        padding: 0;
    }

    #content {
        margin-top: 100px; /* 留出空间给页眉 */
        margin-bottom: 100px; /* 留出空间给页脚 */
    }

    .header, .footer {
        position: fixed;
        left: 0;
        right: 0;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #f1f1f1;
        border-bottom: 1px solid #ddd;
    }

    .header {
        top: 0;
    }
    
    .footer {
        bottom: 0;
    }
}

3. 使用JavaScript生成页眉和页脚

最后，通过JavaScript动态生成页眉和页脚内容。以下是实现的示例代码：

// script.js
function addHeaderAndFooter() {
    const header = document.createElement('div');
    header.className = 'header';
    header.innerHTML = '这是页眉';

    const footer = document.createElement('div');
    footer.className = 'footer';
    footer.innerHTML = '这是页脚';

    document.body.appendChild(header);
    document.body.appendChild(footer);
}

window.onload = addHeaderAndFooter;

4. 打印序列图

在代码准备完毕后，我们可以通过打印预览来检查效果。在打印过程中，页眉将出现在每一页的顶部，页脚将出现在每一页的底部。以下是该过程的顺序图表现：

sequenceDiagram
    participant User as 用户
    participant Browser as 浏览器
    participant Print as 打印机

    User->>Browser: 点击打印按钮
    Browser->>Print: 发送打印请求
    Print->>Browser: 返回打印预览
    Browser->>Print: 确定打印
    Print-->>User: 打印输出

结论

通过以上步骤，我们可以轻松地为打印输出添加页眉和页脚。无论是公司报告、个人文档，还是在线生成的发票，正确的页眉和页脚都可以提升文档的专业性和可读性。希望本篇文章能帮助您在开发中更好地实现打印功能。您可以尝试将上述代码加入您的项目中，并根据需要自定义内容和样式。