WeasyPrint CSS Paged Media终极指南：10个页面尺寸与出血控制技巧

WeasyPrint CSS Paged Media终极指南：10个页面尺寸与出血控制技巧

【免费下载链接】WeasyPrint The awesome document factory 项目地址: https://gitcode.com/gh_mirrors/we/WeasyPrint

WeasyPrint是一个强大的开源HTML转PDF工具，专门用于处理CSS分页媒体（Paged Media）功能。作为专业的文档工厂，它能够将HTML和CSS完美转换为具有精确页面控制的高质量PDF文档。对于需要生成报告、发票、手册等印刷级文档的开发者来说，WeasyPrint的CSS Paged Media模块是不可或缺的利器。

理解CSS Paged Media基础概念

CSS Paged Media是CSS3规范中专门用于打印和分页文档的模块。在WeasyPrint中，通过@page规则来控制页面布局，这是创建专业印刷文档的核心功能。

页面控制模块位于layout/page.py，负责处理所有的页面级样式和布局。

页面尺寸设置技巧

1. 标准纸张尺寸设置

@page {
  size: A4;        /* A4纸张 */
  size: letter;    /* 信纸尺寸 */  
  size: landscape; /* 横向模式 */

2. 自定义页面尺寸

@page {
  size: 210mm 297mm;  /* 宽 x 高 */
  size: 8.5in 11in;     /* 英寸单位 */

页面边距精准控制

3. 统一边距设置

@page {
  margin: 2cm;           /* 四边统一 */
  margin: 1cm 2cm;       /* 上下 | 左右 */
  margin: 1cm 2cm 1.5cm;/* 上 | 左右 | 下 */
  margin: 1cm 2cm 1.5cm 2cm; /* 上 | 右 | 下 | 左 */
}

4. 分边距设置

@page {
  margin-top: 1cm;
  margin-right: 2cm;
  margin-bottom: 1.5cm;
  margin-left: 2cm;
}

出血区域专业配置

5. 出血设置基础

出血（Bleed）是印刷品边缘预留的额外区域，用于裁切时避免出现白边。

@page {
  bleed: 3mm;             /* 四边统一出血 */
  bleed: 3mm 5mm;         /* 垂直 | 水平 */
  bleed: 3mm 5mm 3mm;    /* 上 | 左右 | 下 */
}

多页面文档高级技巧

6. 命名页面规则

@page cover {
  size: A4;
  margin: 0;
}

@page content {
  size: A4;
  margin: 2cm;
}

7. 伪类页面选择

@page :first {           /* 第一页 */
  margin-top: 4cm;
}

@page :left {            /* 左页 */
  margin-right: 3cm;
  margin-left: 2cm;
}

@page :right {           /* 右页 */
  margin-left: 3cm;
  margin-right: 2cm;
}

页眉页脚与页边框

8. 页边框内容设置

@page {
  @top-left {
    content: "章节标题";
    font-size: 10pt;
  }
  
  @bottom-center {
    content: counter(page);
    font-size: 8pt;
  }
}

实际应用场景示例

9. 商业报告模板

@page report {
  size: A4;
  margin: 2.5cm;
  bleed: 3mm;
}

10. 宣传册布局

@page brochure {
  size: A4 landscape;
  margin: 1.5cm;
}

测试与验证方法

WeasyPrint提供了完整的测试套件来验证页面设置的正确性。相关测试文件位于tests/layout/test_page.py，包含了各种页面尺寸和边距设置的测试用例。

最佳实践总结

1. 始终设置页面尺寸 - 避免依赖浏览器默认值
2. 合理规划边距 - 考虑装订和阅读体验
3. 预留出血区域 - 确保印刷品质量
4. 使用命名页面 - 提高代码可维护性
5. 测试多种输出 - 验证在不同设备上的显示效果

通过掌握WeasyPrint的CSS Paged Media功能，你可以创建出专业级别的印刷文档，满足各种商业和个人需求。无论是简单的报告还是复杂的宣传材料，这些技巧都能帮助你实现精确的页面控制。

【免费下载链接】WeasyPrint The awesome document factory 项目地址: https://gitcode.com/gh_mirrors/we/WeasyPrint