js打印页面如何设置页眉页脚

在JavaScript中设置打印页面的页眉页脚，可以通过以下几种方式实现：使用CSS @page规则、JavaScript window.print()方法、添加自定义页眉页脚内容。最常用的方法是通过CSS @page规则进行控制，下面将详细描述其实现过程。

一、使用CSS @page规则

使用CSS @page规则可以对打印页面的样式进行控制，包括页眉页脚的设置。

1.1 定义@page规则

在CSS中，我们可以使用@page规则来定义页面的尺寸、边距以及页眉页脚的内容。@page规则允许我们为打印页面指定特定的样式。

@page {
  size: auto; /* 自动调整页面尺寸 */
  margin: 20mm; /* 设置页面边距 */
  @top-left {
    content: "页眉左侧内容";
  }
  @top-right {
    content: "页眉右侧内容";
  }
  @bottom-left {
    content: "页脚左侧内容";
  }
  @bottom-right {
    content: "页脚右侧内容";
  }
}

1.2 设置页眉页脚内容

在@page规则中，可以使用@top-left、@top-right、@bottom-left和@bottom-right来分别定义页眉和页脚的内容。以下是一个具体的示例：

@page {
  size: A4; /* 设置页面尺寸为A4 */
  margin: 20mm;
  @top-left {
    content: "公司名称";
  }
  @top-right {
    content: "打印日期: " counter(page);
  }
  @bottom-left {
    content: "页脚左侧内容";
  }
  @bottom-right {
    content: "页码: " counter(page);
  }
}

通过这种方式，可以灵活地设置打印页面的页眉页脚内容。

二、使用JavaScript window.print()方法

使用JavaScript的window.print()方法可以触发浏览器的打印功能，但无法直接控制页眉页脚内容。在这种情况下，可以通过在打印前动态修改页面内容来实现自定义页眉页脚。

2.1 动态添加页眉页脚内容

在JavaScript中，可以使用DOM操作在打印前动态添加页眉页脚内容，以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .header, .footer {
      display: none;
    }
    @media print {
      .header, .footer {
        display: block;
        position: fixed;
        width: 100%;
        text-align: center;
      }
      .header {
        top: 0;
      }
      .footer {
        bottom: 0;
      }
    }
  </style>
</head>
<body>
  <div class="header">公司名称</div>
  <div class="footer">页码: <span class="pageNumber"></span></div>
  <div class="content">
    <!-- 内容区域 -->
  </div>
  <script>
    function updatePageNumbers() {
      var totalPages = document.querySelectorAll('.pageNumber').length;
      for (var i = 0; i < totalPages; i++) {
        document.querySelectorAll('.pageNumber')[i].textContent = (i + 1);
      }
    }
    window.onload = function() {
      updatePageNumbers();
      window.print();
    }
  </script>
</body>
</html>

通过这种方式，可以在打印前动态设置页眉页脚内容，并在打印时显示。

三、添加自定义页眉页脚内容

除了使用CSS和JavaScript外，还可以通过服务器端生成PDF来实现复杂的页眉页脚设置。以下是一些常用的服务器端工具：

3.1 使用Puppeteer

Puppeteer是一个Node.js库，它提供了一个高级API来控制Chrome或Chromium浏览器，可以用来生成PDF并设置页眉页脚。

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.pdf({
    path: 'example.pdf',
    format: 'A4',
    displayHeaderFooter: true,
    headerTemplate: '<div style="font-size:12px; text-align:center;">公司名称</div>',
    footerTemplate: '<div style="font-size:12px; text-align:center;">页码: <span class="pageNumber"></span></div>',
    printBackground: true,
  });
  await browser.close();
})();

使用Puppeteer可以精确控制PDF的生成，并可以自定义页眉页脚内容。

3.2 使用wkhtmltopdf

wkhtmltopdf是一个开源工具，可以将HTML转换为PDF，并支持自定义页眉页脚。

wkhtmltopdf --header-left "公司名称" --footer-right "页码: [page]" https://example.com example.pdf

通过这种方式，可以方便地将HTML页面转换为带有自定义页眉页脚的PDF。

四、总结

通过CSS @page规则、JavaScript window.print()方法、服务器端生成PDF等多种方式，可以实现打印页面的页眉页脚设置。每种方法都有其优点和适用场景，可以根据实际需求选择合适的实现方式。对于简单的打印需求，使用CSS @page规则和JavaScript window.print()方法即可满足；对于复杂的打印需求，可以考虑使用Puppeteer或wkhtmltopdf等工具生成PDF。