打印页面时怎样自定义打印页眉页脚或者去掉眉页脚？

在前端开发中，控制打印时的页眉页脚，或者完全移除它们，主要依赖于 CSS 的 @page 规则以及一些 JavaScript 的技巧。以下是一些方法：

1. 使用 CSS 的 @page 规则:

这是最常用的方法，可以让你精细地控制页眉和页脚的内容和样式。

• 移除页眉页脚:

@page {
  margin: 0; /* 去除所有页边距，包括页眉页脚的空间 */
  size: auto;  /* 根据内容自动调整页面大小 */
}

@media print {
  header, footer { display: none !important; } /* 确保页眉页脚元素被隐藏 */
  body { margin: 0 !important; } /* 去除 body 的页边距 */
}

• 自定义页眉页脚内容:

@page {
  @top-center {
    content: "This is the header"; /* 设置页眉内容 */
    font-size: 12pt;
  }
  @bottom-center {
    content: "Page " counter(page); /* 设置页脚内容，包含页码 */
    font-size: 10pt;
  }
}

@page 规则中可以使用以下伪元素来定位页眉页脚的不同区域：

• @top-left
• @top-center
• @top-right
• @bottom-left
• @bottom-center
• @bottom-right

还可以使用 counter(page) 来显示页码，以及其他 CSS 属性来设置样式。

2. 使用 JavaScript 动态修改样式:

如果需要更动态的控制，可以使用 JavaScript 在打印前修改样式。

function printContent() {
  // 隐藏不需要打印的元素
  document.querySelectorAll('.no-print').forEach(element => {
    element.style.display = 'none';
  });

  // 添加或修改打印样式
  const style = document.createElement('style');
  style.innerHTML = `
    @page {
      margin: 0;
    }
    body {
      margin: 0;
    }
  `;
  document.head.appendChild(style);

  // 执行打印
  window.print();

  // 打印完成后恢复原来的样式 (可选)
  setTimeout(() => {
    document.head.removeChild(style);
    document.querySelectorAll('.no-print').forEach(element => {
      element.style.display = 'block';
    });
  }, 0);
}

// 在按钮点击时触发打印
document.getElementById('printButton').addEventListener('click', printContent);

3. 使用 window.print() 的一些技巧 (不太推荐):

• 有些浏览器可能允许你通过传递一些参数给 window.print() 来控制页眉页脚，但这并不是标准的做法，并且兼容性很差，所以不推荐使用。

一些额外的建议:

• 使用 @media print 可以定义专门用于打印的样式，避免影响屏幕上的显示效果。
• 尽量使用 CSS 来控制样式，避免过多的 JavaScript 操作，提高性能。
• 测试不同浏览器和打印机的兼容性，确保打印效果符合预期。
• 对于复杂的打印需求，可以考虑使用专门的打印库或服务。

通过结合以上方法，你可以灵活地控制打印页面的页眉页脚，实现自定义的打印效果。 记住根据你的具体需求选择最合适的方法。