Headless Chrome生成PDF：隐藏边距、移除页眉页脚及修复中间页边距异常

我之前用Django搭配Headless Chrome生成PDF时，刚好踩过和你一模一样的坑！结合官方文档和自己的试错经验，给你整理两个问题的完美解决方案：

1. 彻底隐藏PDF的所有边距 #

要完全去掉Chrome生成PDF时的默认边距，必须命令行参数+CSS配合使用：

• 调用Headless Chrome时添加参数：--no-margins，这个参数会告诉Chrome不要添加默认的页面边距。
• 在你的HTML模板里添加全局CSS：

@page {
  margin: 0 !important;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}

这样生成的PDF内容会完全贴合页面边缘，没有任何多余边距。

2. 移除默认页眉页脚，同时保留自定义边距 #

这是最常用的需求，你之前用div.wrapper踩的坑，核心原因是没搞懂：Chrome的默认页眉页脚（日期、URL、页码）是嵌入在页面默认边距区域里的，直接给wrapper加margin只会作用于整个容器的首尾，分页后的中间页不会继承这个边距。

正确方案：分两步走 #

步骤1：禁用默认页眉页脚

调用Headless Chrome时添加参数：--print-to-pdf-no-header，这个参数会直接移除所有默认的页眉页脚元素。

步骤2：设置全局自定义边距（每页生效）

用@page规则定义页面的基础边距，再通过内容容器的样式确保内容在边距内显示：

/* 定义每一页的边距，这个区域不会显示内容，也不会有默认页眉页脚 */
@page {
  margin: 2cm; /* 可按需调整为1cm、1.5cm等，上下左右统一设置 */
}
/* 确保body占满页面可用区域，避免内容溢出 */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
/* 如果用wrapper容器包裹内容，这样设置即可 */
div.wrapper {
  width: 100%;
  padding: 0; /* 因为@page已经设了边距，这里不需要额外padding，除非要内层间距 */
  box-sizing: border-box;
}

这样设置后，所有页面（包括中间页）的内容都会和页面边缘保持你设定的距离，同时默认页眉页脚完全消失。

备选：纯CSS移除页眉页脚（无需改命令行） #

如果因为环境限制没法修改命令行参数，也可以用CSS直接隐藏默认页眉页脚：

@page {
  margin: 2cm;
  /* 清空所有默认页眉页脚的内容 */
  @top-left { content: ""; }
  @top-right { content: ""; }
  @bottom-left { content: ""; }
  @bottom-right { content: ""; }
}

这种方式和命令行参数的效果完全一致，适合无法调整Chrome启动参数的场景。

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