---
title: "PDF 中的自定义页面布局"
description: "了解如何使用 Export PDF 扩展来自定义 PDF 页面和边距尺寸。"
canonical_url: "https://tiptap.zhcndoc.com/conversion/export/pdf/page-layout"
---

# PDF 中的自定义页面布局

了解如何使用 Export PDF 扩展来自定义 PDF 页面和边距尺寸。

- **1. 开始试用或订阅**

  在您的账户中开始[免费试用](https://cloud.tiptap.dev/v2?trial=true)或[订阅 Start 套餐](https://cloud.tiptap.dev/v2/billing)。
- **2. 从私有注册表安装**

  要安装此前端扩展，请按照[安装指南](https://tiptap.zhcndoc.com/guides/pro-extensions.md)中的说明进行操作，并使用 Tiptap 的私有 npm 注册表进行身份验证。

PDF 导出扩展支持自定义页面大小和边距，让您可以创建满足需求的精确布局文档。无论您需要 A5 纸张、自定义纸张大小，还是特定的边距配置，都可以直接在扩展中进行设置。

## 页面大小配置

使用 `pageSize` 选项来定义导出 PDF 文件的自定义页面尺寸。页面大小配置支持以多种单位设置宽度和高度值。

### 支持的单位

所有页面大小和边距尺寸均支持以下单位：

| 单位   | 说明     |
| ---- | ------ |
| `cm` | 厘米（默认） |
| `in` | 英寸     |
| `pt` | 磅      |
| `pc` | 派卡     |
| `mm` | 毫米     |
| `px` | 像素     |

### 配置选项

| 属性       | 类型       | 说明                                           | 默认值        |
| -------- | -------- | -------------------------------------------- | ---------- |
| `width`  | `string` | 页面宽度。必须是一个正数，后跟有效单位（cm, in, pt, pc, mm, px）。 | `"21cm"`   |
| `height` | `string` | 页面高度。必须是一个正数，后跟有效单位（cm, in, pt, pc, mm, px）。 | `"29.7cm"` |

```js
import { ExportPdf } from '@tiptap-pro/extension-export-pdf'

ExportPdf.configure({
  token: 'YOUR_TOKEN',
  pageSize: {
    width: '14.8cm', // A5 宽度
    height: '21cm', // A5 高度
  },
})
```

## 页面边距配置

`pageMargins` 选项允许您为文档页面的每一侧设置自定义边距。与页面大小不同，顶部和底部边距可以接受负值。

### 配置选项

| 属性       | 类型       | 说明                                                  | 默认值        |
| -------- | -------- | --------------------------------------------------- | ---------- |
| `top`    | `string` | 页面上边距。可以为负值。必须是一个数字，后跟有效单位（cm, in, pt, pc, mm, px）。 | `"1cm"`    |
| `bottom` | `string` | 页面下边距。可以为负值。必须是一个数字，后跟有效单位（cm, in, pt, pc, mm, px）。 | `"1cm"`    |
| `left`   | `string` | 页面左边距。必须是一个正数，后跟有效单位（cm, in, pt, pc, mm, px）。       | `"1cm"`    |
| `right`  | `string` | 页面右边距。必须是一个正数，后跟有效单位（cm, in, pt, pc, mm, px）。       | `"1cm"`    |
| `header` | `string` | 从页面顶部边缘到页眉顶部的距离。应小于 `top`。必须是一个带单位的正数。              | `"1.25cm"` |
| `footer` | `string` | 从页面底部边缘到页脚底部的距离。应小于 `bottom`。必须是一个带单位的正数。           | `"1.25cm"` |

```js
import { ExportPdf } from '@tiptap-pro/extension-export-pdf'

ExportPdf.configure({
  token: 'YOUR_TOKEN',
  pageMargins: {
    top: '2cm',
    bottom: '2cm',
    left: '1.5cm',
    right: '1.5cm',
    // 从页面边缘到页眉/页脚的距离
    header: '1cm',
    footer: '1cm',
  },
})
```

> **由 Pages 扩展自动推导:**
>
> 当 [Pages 扩展](https://tiptap.zhcndoc.com/editor/extensions/functionality/pages.md) 与 `ExportPdf` 一起配置时，`header` 和 `footer` 偏移量会自动从 Pages 中存储的 `headerTopMargin` 和 `footerBottomMargin` 值推导而来。您传入 `pageMargins` 的值始终具有优先级。

> **转换服务要求:**
>
> 要完全支持 `pageMargins.header` 和 `pageMargins.footer`，Tiptap convert service 需要使用支持这些字段的版本，并提供更新后的 `@tiptap-pro/extension-export-docx`。在较旧的 convert service 版本中，这些值会被忽略，并使用 Word 默认值。

## 页面背景颜色

使用 `pageColor` 选项为导出的 PDF 每一页设置背景颜色。

### 接受的格式

| 格式       | 示例                                         |
| -------- | ------------------------------------------ |
| Hex（6 位） | `"#ff0000"`                                |
| Hex（3 位） | `"#f00"`                                   |
| `rgb()`  | `"rgb(255, 0, 0)"`                         |
| `rgba()` | `"rgba(255, 0, 0, 0.5)"`                   |
| 命名颜色     | 常见的 CSS 命名颜色（`"red"`、`"blue"`、`"green"` 等） |

传入 `"transparent"`，或将 `pageColor` 保持未定义，即可省略页面颜色。

```js
ExportPdf.configure({
  token: 'YOUR_TOKEN',
  pageColor: '#fff8dc',
})
```

## 完整示例

以下是一个完整示例，展示如何使用 PDF 导出扩展配置自定义页面布局：

```js
import { ExportPdf } from '@tiptap-pro/extension-export-pdf'

const editor = new Editor({
  extensions: [
    // 其他扩展...
    ExportPdf.configure({
      token: 'YOUR_TOKEN',
      // A5 页面大小
      pageSize: {
        width: '14.8cm',
        height: '21cm',
      },
      // 自定义边距
      pageMargins: {
        top: '2cm',
        bottom: '2cm',
        left: '2cm',
        right: '2cm',
      },
      // 页面背景颜色
      pageColor: '#fff8dc',
    }),
    // 其他扩展...
  ],
})

// 使用自定义布局导出
editor
  .chain()
  .exportPdf({
    onCompleteExport(result) {
      const url = URL.createObjectURL(result)
      const a = document.createElement('a')

      a.href = url
      a.download = 'custom-layout.pdf'
      a.click()

      URL.revokeObjectURL(url)
    },
  })
  .run()
```

## 常用页面尺寸

以下是一些常用的页面尺寸供参考：

| 格式          | 宽度       | 高度       |
| ----------- | -------- | -------- |
| **A4**      | `21cm`   | `29.7cm` |
| **A5**      | `14.8cm` | `21cm`   |
| **Letter**  | `8.5in`  | `11in`   |
| **Legal**   | `8.5in`  | `14in`   |
| **Tabloid** | `11in`   | `17in`   |

## 不同计量单位混用

您可以根据喜好混合使用不同的单位：

```js
ExportPdf.configure({
  token: 'YOUR_TOKEN',
  // US Letter size in inches
  pageSize: {
    width: '8.5in',
    height: '11in',
  },
  // 使用不同单位的边距
  pageMargins: {
    top: '0.75in', // 英寸
    bottom: '72pt', // 磅（1 英寸 = 72 磅）
    left: '2cm', // 厘米
    right: '20mm', // 毫米
  },
})
```

> **单位一致性:**
>
> 虽然您可以混用不同单位，但通常建议在整个配置中使用一致的单位，以提高可维护性和清晰度。