Odoo 14 QWEB报表如何设置整页环绕边框并应用到所有页面？

架构老林

2026-7-2

解决PDF报表整页环绕边框问题

你遇到的核心问题是.page容器默认高度由内容决定，无法占满整个PDF页面高度。下面提供两种可靠的解决方案：

方案一：使用CSS `@page` 规则（推荐）

直接通过PDF专用的打印样式规则给每个页面添加边框，无需依赖容器高度，适配自动分页场景：

/* 定义PDF页面基础样式 */
@page {
  size: A4; /* 根据需求替换为其他尺寸，比如Letter */
  margin: 20px; /* 控制边框与页面边缘的距离 */
  border: 3px solid #0070c0;
  border-radius: 25px;
}

/* 确保内容适配页面内边距 */
.page {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px;
}

说明：这种方式直接作用于每个PDF分页，不管内容多少，每个页面都会生成完整的圆角边框。注意部分PDF渲染工具（如wkhtmltopdf）对@page的border-radius支持有限，若出现圆角失效，可尝试方案二。

方案二：强制容器占满单页高度 + 手动分页

通过固定.page容器的尺寸为页面大小，配合分页规则确保每个容器对应完整一页：

body {
  margin: 0;
  padding: 0;
}

.page {
  width: 210mm; /* A4宽度，按需调整 */
  height: 297mm; /* A4高度，按需调整 */
  box-sizing: border-box;
  border: 3px solid #0070c0;
  border-radius: 25px;
  padding: 10px;
  margin: 0 auto 15px auto; /* 分页间距，避免边框重叠 */
  page-break-after: always; /* 强制每个容器单独分页 */
}

/* 取消最后一个页面的强制分页 */
.page:last-child {
  page-break-after: avoid;
}

说明：需要确保容器尺寸与PDF输出的页面尺寸完全匹配，若内容超出单页，需手动将内容拆分到多个.page容器，或添加page-break-inside: avoid;避免内容在容器内被拆分。