React-Print-PDF 页面布局配置完全指南

戚展焰Beatrix

于 2025-06-24 09:32:00 发布

阅读量666

点赞数 28

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00590/article/details/148864128

React-Print-PDF 页面布局配置完全指南

react-print-pdf Build and generate PDF using React 📄 UI kit for PDFs and print documents. Simple, reusable components and templates to create great invoices, docs, brochures. Use your favorite front-end framework React to build your next PDF. 项目地址: https://gitcode.com/gh_mirrors/re/react-print-pdf

前言

在现代Web开发中，将React组件转换为PDF文档是一个常见需求。React-Print-PDF项目提供了强大的工具来实现这一目标。本文将深入探讨如何使用React-Print-PDF进行专业的页面布局配置，帮助开发者创建符合打印标准的PDF文档。

页面基础配置

页面尺寸与方向

在PDF生成中，正确设置页面尺寸和方向是首要任务。React-Print-PDF支持通过CSS的@page规则进行配置：

<CSS>
{`
@page {
    size: A4 portrait;  // 默认A4纵向
    // 或
    size: letter landscape;  // Letter横向
}
`}
</CSS>

专业建议：

国际业务推荐使用A4尺寸(210×297mm)
北美地区常用Letter尺寸(8.5×11英寸)
横向布局适合宽表格或图表展示

页边距设置

页边距不仅影响美观，更关系到内容的可读性：

<CSS>
{`
@page {
    margin: 2cm;  // 统一设置
    // 或分别设置
    margin-top: 1in;
    margin-right: 1.5in;
    margin-bottom: 1in;
    margin-left: 1.5in;
}
`}
</CSS>

关键注意事项：

页眉页脚位于页边距区域内
打印文档建议使用绝对单位(in/cm/mm)
避免使用em/rem等相对单位，防止缩放问题

页眉页脚设计

基础实现

React-Print-PDF提供了专用组件简化页眉页脚创建：

import { PageTop, PageBottom, PageNumber } from '@fileforge/react-print';

// 在文档中使用
<PageTop>
  <h2>公司内部文档</h2>
</PageTop>
<PageBottom>
  第<PageNumber />页
</PageBottom>

高级控制技巧

位置控制：通过CSS精确调整位置
内容动态化：使用页码计数器
特殊页处理：首页/空白页差异化处理

@page {
    @top-center {
        content: element(header);
    }
    @bottom-right {
        content: "Page " counter(page);
    }
}

@page:first {
    @top-center {
        content: none;  // 首页不显示页眉
    }
}

背景与水印

背景设计

为PDF添加专业背景效果：

<CSS>
{`
@page {
    background-color: #f5f5f5;  // 浅灰背景
}

@page:first {
    background-image: url('title-bg.png');
    background-size: cover;
    background-position: center;
}
`}
</CSS>

水印实现

添加文档保护水印：

<CSS>
{`
@page {
    @prince-overlay {
        content: "内部使用";
        font-size: 48pt;
        color: rgba(0,0,0,0.1);
        transform: rotate(-45deg);
        pointer-events: none;  // 防止干扰内容
    }
}
`}
</CSS>

高级页面控制

页面特定样式

针对不同页面应用不同布局：

/* 奇偶页不同边距 */
@page:left {
    margin-left: 3cm;
    margin-right: 1cm;
}

@page:right {
    margin-left: 1cm;
    margin-right: 3cm;
}

/* 空白页处理 */
@page:blank {
    @top-center {
        content: "此页空白";
    }
}

命名页面技术

实现特定内容的特殊布局：

<CSS>
{`
.special-landscape {
    page: landscape-page;
}

@page landscape-page {
    size: A4 landscape;
    margin: 1cm;
}
`}
</CSS>

<div className="special-landscape">
  {/* 宽表格等内容 */}
</div>