--- title: "从编辑器导出 PDF" description: "了解如何在我们的文档中使用 Export PDF 扩展将 Tiptap 编辑器内容导出为 PDF 文件。" canonical_url: "https://tiptap.zhcndoc.com/conversion/export/pdf/editor-extension" --- # 从编辑器导出 PDF 了解如何在我们的文档中使用 Export PDF 扩展将 Tiptap 编辑器内容导出为 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 仓库进行身份验证。 > **Interactive demo:** [ExportPdf](https://embed-pro.tiptap.dev/preview/Extensions/ExportPdf) 使用 Tiptap 的 `@tiptap-pro/extension-export-pdf` 将编辑器内容导出为 `.pdf` 文件。此扩展通过将文档发送到 Tiptap 转换服务进行转换，把 PDF 导出功能集成到你的编辑器中。 如果你更希望在自己的端处理转换，也可以改用 [REST API](https://tiptap.zhcndoc.com/conversion/export/pdf/rest-api.md)。 ## 安装 PDF 导出扩展 Conversion 扩展发布在 Tiptap 的私有 npm 仓库中。请按照 [私有仓库指南](https://tiptap.zhcndoc.com/guides/pro-extensions.md) 集成这些扩展。 完成后，你就可以安装并导入 **Export PDF** 扩展包。 ```bash npm i @tiptap-pro/extension-export-pdf ``` ```js import { ExportPdf } from '@tiptap-pro/extension-export-pdf' ``` ## 配置扩展 `ExportPdf` 扩展可以使用 `ExportPdfOptions`（`object`）作为 `configure` 方法的参数进行配置，包含以下属性： ```ts import { ExportPdf } from '@tiptap-pro/extension-export-pdf' const editor = new Editor({ extensions: [ // 其他扩展 ... ExportPdf.configure({ endpoint: 'https://api.tiptap.dev/v2/convert', token: 'YOUR_TOKEN', styleOverrides: {}, headers: {}, footers: {}, pageSize: { width: '21cm', height: '29.7cm' }, pageMargins: { top: '1cm', bottom: '1cm', left: '1cm', right: '1cm' }, customNodes: [], onCompleteExport: (result) => { // 处理导出的 Blob }, }), // 其他扩展 ... ], }) ``` | 参数 | 类型 | 描述 | 默认值 | | ------------------ | ------------------------ | ------------------------------------------------------------------------------ | ------------------------------------- | | `endpoint` | `string` | 用于转换的 Tiptap API 端点 | `'https://api.tiptap.dev/v2/convert'` | | `token` | `string` | 用于身份验证的 Tiptap JWT | `''` | | `styleOverrides` | `Record` | 要应用于导出的样式覆盖 | `undefined` | | `headers` | `HeaderConfig` | 导出文档的页眉配置 | `undefined` | | `footers` | `FooterConfig` | 导出文档的页脚配置 | `undefined` | | `pageSize` | `PageSize` | 页面大小配置 | `undefined` | | `pageMargins` | `PageMargins` | 页面边距配置 | `undefined` | | `customNodes` | `CustomNodeDefinition[]` | 用于基于 DOCX 的转换的自定义节点定义（需要 `@tiptap-pro/extension-export-docx`） | `undefined` | | `customFonts` | `CustomFont[]` | 为 PDF 导出提供的自定义字体文件（仅限本地部署） | `undefined` | | `onCompleteExport` | `(result: Blob) => void` | 接收导出文件 Blob 的回调 | 如果未提供则抛出错误 | | `onExportError` | `(error: Error) => void` | 可选回调；当导出流程被拒绝时触发（动态导入失败、DOCX 转换失败、网络错误、非 OK 响应）。未提供时，错误会通过 `console.error` 记录。 | `undefined` | ### 页眉和页脚插槽值 每个页眉和页脚插槽（`default`、`first`、`even`）都接受五种形态中的任意一种；请选择与你的数据相匹配的形式。前三种仅使用 `@tiptap-pro/extension-export-pdf` 即可；后两种还需要安装 `@tiptap-pro/extension-export-docx`（它们会走先 DOCX 后 PDF 的导出路径，并且采用懒加载，因此不会影响仅使用 PDF 的消费者）。 | 形态 | 示例 | 说明 | | ----------------------------- | ------------------------------------------ | ----------------------------------------------------------- | | 纯文本 | `'Company name, 2026'` | 无样式的页眉/页脚。 | | 字符串化的 Tiptap JSONContent | `JSON.stringify(myHeaderDoc)` | 预先序列化的 Tiptap 节点。保留富文本格式。 | | Tiptap JSONContent 对象 | `{ type: 'doc', content: [/* … */] }` | 直接传入富文本 Tiptap 节点。无需字符串化。 | | `docx` `Header` / `Footer` 实例 | `new Docx.Header({ children: [/* … */] })` | 完整的 DOCX 级别控制。需要 DOCX 扩展。 | | 返回 `Header` / `Footer` 的异步工厂 | `() => convertHeader({ node })` | 在导出时按需构建。典型用法：`convertHeader` / `convertFooter`。需要 DOCX 扩展。 | Tiptap JSONContent 对象**必须**包含 `type` 字段。扩展在运行时就是通过这个字段区分 Tiptap 节点和 `docx` 实例的。不包含 `type` 且也不是 `Header` / `Footer` 实例的对象会被丢弃，并通过 `console.warn` 提示出问题的值，不会传递给 DOCX 序列化器。 在 TypeScript 中，这些形态会收敛为两个别名（`type` 要求被编码在 `TiptapNodeContent` 中）： ```ts import type { JSONContent } from '@tiptap/core' import type { Footer, Header } from 'docx' type TiptapNodeContent = JSONContent & { type: string } type HeaderSlotValue = string | TiptapNodeContent | Header | (() => Promise
) type FooterSlotValue = string | TiptapNodeContent | Footer | (() => Promise