js打印控制页眉

在JavaScript中，控制页眉打印通常涉及到页面的样式调整，以确保在打印时只显示需要的内容。以下是一些基础概念和步骤，用于控制打印时的页眉显示：

基础概念

CSS媒体查询：使用@media print可以针对打印设备应用特定的样式。
打印样式表：可以创建一个单独的CSS文件，专门用于打印样式，然后在HTML中通过<link>标签引入。

类型

页面布局调整：隐藏不需要打印的元素，调整页面边距和字体大小。
页眉和页脚：自定义打印时的页眉和页脚内容。

应用场景

报告和文档：生成专业的报告或文档，只包含关键信息。
发票和凭证：打印发票或凭证时，确保只显示必要的信息。

示例代码

以下是一个简单的示例，展示如何使用JavaScript和CSS控制打印时的页眉：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Control Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <h1>Main Content</h1>
        <p>This is the main content of the page.</p>
    </div>
    <button onclick="window.print()">Print</button>
</body>
</html>

CSS (styles.css)

/* General styles */
body {
    font-family: Arial, sans-serif;
}

.content {
    margin: 20px;
}

/* Print styles */
@media print {
    body {
        margin: 0;
    }
    .content {
        margin: 20px;
    }
    .no-print {
        display: none;
    }
    @page {
        margin: 20mm;
    }
    /* Custom header */
    .header {
        position: running header;
    }
    @top-center {
        content: element(header);
    }
}

JavaScript (可选)

如果需要动态生成页眉内容，可以使用JavaScript：

document.addEventListener("DOMContentLoaded", function() {
    var header = document.createElement("div");
    header.className = "header";
    header.innerHTML = "Custom Page Header";
    document.body.insertBefore(header, document.body.firstChild);
});