JavaScript+CSS控制打印格式示例介绍

在JavaScript和CSS中控制打印格式通常涉及到使用CSS的媒体查询（Media Queries）来定义打印时的样式，并可能使用JavaScript来触发打印操作或调整打印前的页面内容。以下是一个简单的示例，展示了如何结合使用JavaScript和CSS来控制打印格式。

### CSS部分

在你的CSS文件中，你可以使用`@media print`媒体查询来指定仅在打印时应用的样式。


/* 通用样式 */
body {
    font-family: Arial, sans-serif;
}

/* 打印时隐藏的元素 */
.no-print {
    display: none;
}

/* 打印时特定的样式 */
@media print {
    body {
        font-size: 12pt;
    }

    .header, .footer {
        text-align: center;
    }

    .header {
        margin-bottom: 20pt;
    }

    .footer {
        margin-top: 20pt;
        page-break-after: always; /* 在页脚后总是分页 */
    }

    /* 可能还有其他特定于打印的样式 */
}

### JavaScript部分

在JavaScript中，你可以使用`window.print()`方法来触发打印操作。此外，你还可以在打印前通过JavaScript动态地修改页面内容，以更好地适应打印格式。


// 假设你有一个按钮用于触发打印
document.getElementById('printButton').addEventListener('click', function() {
    // 在这里，你可以通过JavaScript修改页面内容
    // 例如，隐藏不需要打印的元素
    var noPrintElements = document.querySelectorAll('.no-print');
    noPrintElements.forEach(function(element) {
        element.style.display = 'none'; // 确保这些元素在打印时不会显示
    });

    // 触发打印
    window.print();

    // 打印后恢复页面内容（可选）
    // noPrintElements.forEach(function(element) {
    //     element.style.display = ''; // 恢复原来的显示状态
    // });
});

### HTML部分

最后，确保你的HTML元素使用了上面CSS中定义的类。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header">页眉内容</div>
    <p>这是一些需要打印的内容。</p>
    <div class="no-print">这部分内容不需要打印。</div>
    <button id="printButton">打印页面</button>
    <div class="footer">页脚内容</div>

    <script src="script.js"></script>
</body>
</html>

这个示例展示了如何使用CSS的`@media print`查询来定义打印时的样式，并使用JavaScript来触发打印操作。你可以根据需求调整CSS和JavaScript代码，以更好地控制打印格式。