# PDF页眉页脚片段

将HTML转换为PDF，并插入Logo/标题/日期等页眉页脚片段

> 标准页面: https://elysiatools.com/zh/tools/pdf-header-footer-snippets

- **分类:** Document Tools

- **关键词:** pdf, html, header, footer, logo, title, date, puppeteer

## 概述

渲染HTML为PDF，并插入可复用的页眉/页脚片段。

**支持片段：**
- Logo（图片上传）
- 标题文本
- 日期（ISO/本地/自定义）
- 可选页脚页码

**布局：**
- 左/中/右分区布局
- 配合页边距预留页眉页脚空间

## 输入项

- **HTML内容** (textarea): # Quarterly Report Write your HTML here...
- **自定义CSS** (textarea): /* Optional custom styles */
- **页面尺寸** (select)
- **横向** (checkbox)
- **打印背景** (checkbox)
- **上边距（毫米）** (number)
- **下边距（毫米）** (number)
- **左边距（毫米）** (number)
- **右边距（毫米）** (number)
- **启用页眉** (checkbox)
- **启用页脚** (checkbox)
- **Logo图片** (file): 上传Logo图片
- **Logo宽度（像素）** (number)
- **页眉标题** (text): Document Title
- **页脚标题** (text): Confidential
- **页眉显示日期** (checkbox)
- **页脚显示日期** (checkbox)
- **日期格式** (select)
- **自定义日期文本** (text): March 2026
- **显示页码** (checkbox)
- **等待条件** (select)
- **额外等待时间（毫秒）** (number)

## 适用场景

- 需要将网页或 HTML 模板转换为带有公司 Logo 和标题的正式 PDF 文件时。
- 生成报告、合同或手册，要求每页自动显示日期、页码或机密标识时。
- 希望自定义 PDF 的页边距、页面方向（横向/纵向）和整体样式，以满足特定的打印或归档需求时。

## 工作原理

- 在“HTML内容”区域输入或粘贴您的 HTML 代码，并可选择添加自定义 CSS 来控制正文样式。
- 配置页面设置，如选择页面尺寸（A4、Letter等）、方向、页边距，并决定是否打印背景。
- 启用并设置页眉和页脚，可分别上传 Logo 图片、输入标题文本、选择日期格式（ISO、本地或自定义）以及是否显示页码。
- 点击生成，工具将渲染 HTML 并按照您的配置插入页眉页脚片段，最终输出一个完整的 PDF 文件。

## 使用案例

- 为季度财务报告自动生成带有公司 Logo、报告标题和生成日期的 PDF 版本。
- 将在线合同或协议模板转换为 PDF，并在页脚添加“机密”字样和连续页码。
- 制作产品宣传册的 PDF 草稿，通过自定义 CSS 和横向布局优化图文排版效果。

## 常见问题

### 支持哪些图片格式作为 Logo？

支持 PNG、JPEG、SVG 和 WebP 格式的图片文件。

### 日期格式有哪些选择？

提供三种格式：ISO（YYYY-MM-DD）、本地化格式（根据浏览器语言）以及完全自定义的文本。

### 可以调整页眉页脚与正文之间的间距吗？

可以。通过设置“上边距”和“下边距”（单位为毫米）来为页眉和页脚预留空间。

### 是否支持横向页面？

支持。在页面设置中勾选“横向”选项，即可生成横向布局的 PDF。

### 如何为 PDF 正文添加自定义样式？

在“自定义CSS”文本框中编写 CSS 代码，这些样式将应用于 HTML 内容主体部分。

## 相关工具

- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [PDF品牌手册](https://elysiatools.com/zh/tools/pdf-brand-guidelines-pdf): 生成包含Logo、色板、字体和间距规范的品牌手册PDF
- [图片透明度水印工具](https://elysiatools.com/zh/tools/image-watermark-opacity): 为图片添加具有自定义透明度的水印，支持文字和图片水印，具有高级透明度控制功能
- [无障碍合规检测器](https://elysiatools.com/zh/tools/accessibility-checker): 检测 HTML、网页或设计稿图片中的常见 WCAG 2.1 问题，并给出可直接修复的建议
- [PDF发票生成器](https://elysiatools.com/zh/tools/pdf-invoice-generator): 使用结构化明细生成带品牌的发票PDF
- [图片角落水印工具](https://elysiatools.com/zh/tools/image-watermark-corner): 为图片添加角落水印，可自定义位置、大小、透明度和多角落选项
- [图片水印工具](https://elysiatools.com/zh/tools/image-watermark-image): 为图片添加图片水印，可自定义位置、大小、透明度和旋转角度
- [艺术二维码：样式化模块与 Logo 嵌入生成器](https://elysiatools.com/zh/tools/qr-code-art-styled-module-and-logo-embed-generator): 生成品牌色、渐变、圆角/圆点模块与中央 Logo 的艺术二维码，附 ISO 掩码惩罚分解、逐模块元数据导出与里德–所罗门擦除预算判定。

## 示例

- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web Rust 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-rust): Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换

## 相关内容

- [PDF 表单、导航与审阅工作流](https://elysiatools.com/zh/hubs/pdf-forms-navigation-review-workflows): 准备可填写 PDF 表单，补齐内部导航和审阅批注，完善页码页眉页脚，并在交付前核验签名。
- [可打印 PDF 版式工作流](https://elysiatools.com/zh/hubs/print-pdf-layout-workflows): 把 HTML、Markdown、README 或纯文本转换成带页面模板、字体、页眉页脚、页码、目录、多栏和方向检查的精致 PDF。