使用@page实现HTML页面打印页码/标题失败，该如何解决？

问题分析 #

你的CSS存在两个关键问题：

1. counter(pages) 生效需要浏览器正确识别页面计数，且默认页眉页脚可能覆盖自定义内容
2. doctitle content() 不是合法的CSS语法，原生@page规则无法直接获取文档标题

解决方案 #

不需要依赖JS库，用原生CSS+少量JS即可实现需求：

1. 修复页码显示

首先隐藏浏览器默认页眉页脚，确保自定义页码能正常显示：

@media print {
  /* 设置页面边距，为自定义页码留出空间 */
  @page {
    size: A4;
    margin: 2cm;
  }

  /* 清空浏览器默认的页眉页脚区域内容 */
  @top-left, @top-right, @bottom-left {
    content: "";
  }

  /* 自定义右下角页码 */
  @page {
    @bottom-right {
      content: counter(page) " of " counter(pages);
      font-size: 12px;
    }
  }

  /* 确保页面主体内容不会被截断 */
  body {
    margin: 0;
    font-size: 14px;
  }
}

2. 实现文档标题打印

原生CSS无法直接在@page中读取document.title，可以通过CSS变量+原生JS实现：

• 第一步，修改CSS，使用CSS变量承载文档标题：

:root {
  /* 初始化文档标题变量 */
  --document-title: "";
}

@media print {
  @page {
    size: A4;
    margin: 2cm;

    @bottom-right {
      content: counter(page) " of " counter(pages);
      font-size: 12px;
    }

    /* 引用CSS变量显示文档标题 */
    @bottom-center {
      content: var(--document-title);
      font-size: 12px;
    }
  }

  @top-left, @top-right, @bottom-left {
    content: "";
  }

  body {
    margin: 0;
    font-size: 14px;
  }
}

• 第二步，添加少量原生JS，将页面标题赋值给CSS变量：

// 页面加载完成后设置文档标题变量
document.addEventListener('DOMContentLoaded', () => {
  // 用引号包裹标题，避免空格或特殊字符导致CSS语法错误
  document.documentElement.style.setProperty('--document-title', `"${document.title}"`);
});

关键注意事项 #

• 部分浏览器（如Chrome）需要在打印预览中关闭"页眉和页脚"选项，否则默认内容可能覆盖自定义样式
• 如果需要兼容旧版浏览器，可考虑在页面底部添加固定定位的打印专用页脚元素，通过JS计算页码（但这种方式复杂度更高）

内容的提问来源于stack exchange，提问作者jozinho22