页眉页脚在HTML中并不存在，而是由CSS的@page规则、固定定位元素和print媒体查询中的伪元素控制；需清理相关CSS并隐藏或移除伪装元素，但浏览器自带页眉页脚无法通过前端代码禁用。

如何定位页眉页脚的 HTML 代码

浏览器里看不到“页眉页脚”真实存在——它们是打印时由浏览器或 CSS 控制生成的，不是页面 DOM 的一部分。所以你不能用 document.querySelector 批量删掉它们，因为它们根本不在 HTML 源码里。

真正要处理的，是以下三类内容：

• CSS 中的 @page 规则（控制打印页边距、页眉页脚内容）
• 带 position: fixed 或 position: absolute 且固定在顶部/底部的区块（常被误当页眉页脚）
• 含 print 媒体查询中显式插入的伪元素（如 @page :first { @top-center { content: "xxx"; } }）

批量删除 @page 和打印相关 CSS

这类规则不会影响屏幕显示，但会干扰打印输出。如果你的目标是“让打印时没有页眉页脚”，重点就是清理这些规则。

操作建议：

立即学习“前端免费学习笔记（深入）”；

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 全局搜索文件中所有 @page、@top-center、@bottom-left 等关键词，整块删掉
• 检查 media="print" 的 <style></style> 或 <link>，直接移除或注释掉整个标签
• 注意：某些框架（如 Bootstrap）会在 print.css 里重置 @page { margin: 1cm; }，删前确认是否需要保留基础页边距

识别并清理伪装成页眉页脚的 DOM 元素

很多所谓“页眉页脚”其实是开发者写的 <header class="page-header"></header> 或 <footer id="print-footer"></footer>，它们在打印时会被意外保留。

安全批量清除方法：

• 添加统一打印样式：

  @media print {
    header[role="banner"], footer[role="contentinfo"], .page-header, .page-footer, [class*="header"], [class*="footer"] {
      display: none !important;
    }
  }

• 避免用 display: none 直接删 DOM——会影响屏幕端逻辑和 SEO；优先用 CSS 隐藏
• 若必须从 HTML 中物理删除，可用脚本遍历：

  document.querySelectorAll('header, footer, [class*="header"], [class*="footer"]').forEach(el => el.remove());

  但需确保不误删主内容区的 <footer></footer>

Chrome/Firefox 打印预览里仍显示系统页眉页脚？

这是浏览器自身行为，不受网页控制。用户在打印设置里看到的 “URL / 页码 / 标题” 是浏览器 UI 层叠加的，HTML/CSS 无法禁用。

唯一能干预的方式只有：

• 调用 window.print() 前，提示用户手动关闭：Chrome 设置路径是「更多设置 → 页眉和页脚 → 取消勾选」
• 生成 PDF 时用 Puppeteer 或 wkhtmltopdf，并配置 displayHeaderFooter: false
• 不要指望纯前端代码绕过这个限制——W3C 规范明确将该区域划为 UA（User Agent）控制范围

最容易被忽略的一点：你以为删了 HTML 就能清掉页眉页脚，其实真正起效的是 CSS 的 @page 和打印媒体查询；而浏览器自带的页眉页脚，连 CSS 都碰不到。