使用页眉和页脚扩展您的 EPUB 导出功能

Available in Start planBetav0.4.3

@tiptap-pro/extension-export-epub 扩展内置了对自定义导出文档页眉和页脚的支持。您可以为首页、奇数页和偶数页分别配置不同的页眉和页脚。

页眉配置

headers 对象允许您自定义导出 EPUB 文档的页眉:

属性类型描述
evenAndOddHeadersboolean是否为奇数页和偶数页使用不同的页眉
differentFirstPageboolean是否在第一页使用不同的页眉。设置为 true 时,第一页使用 first 值,而不是 default。
defaultstring每页的标准默认页眉,或启用 evenAndOddHeaders 时奇数页的页眉。支持纯文本字符串或序列化的 Tiptap JSONContent,以实现更丰富的格式。
firststring第一页的页眉,仅在 differentFirstPage 为 true 时使用。支持纯文本字符串或序列化的 Tiptap JSONContent,以实现更丰富的格式。
evenstring偶数页的页眉,仅在启用 evenAndOddHeaders 选项时使用。支持纯文本字符串或序列化的 Tiptap JSONContent,以实现更丰富的格式。

使用纯文本时,将生成一个简单的无样式页眉。使用序列化的 Tiptap JSONContent(通过 JSON.stringify())时,可以保留粗体、斜体和链接等丰富格式。

页脚配置

footers 对象允许您自定义导出 EPUB 文档的页脚:

属性类型说明
evenAndOddFootersboolean是否为奇数页和偶数页使用不同的页脚
differentFirstPageboolean是否首页使用不同的页脚。为 true 时,首页采用 first 值,而非 default。
defaultstring每页的标准默认页脚,或开启 evenAndOddFooters 时奇数页的页脚。支持纯文本字符串或序列化的 Tiptap JSONContent 用于丰富格式。
firststring首页的页脚,仅当 differentFirstPage 为 true 时使用。支持纯文本字符串或序列化的 Tiptap JSONContent 用于丰富格式。
evenstring偶数页的页脚,仅当 evenAndOddFooters 选项启用时使用。支持纯文本字符串或序列化的 Tiptap JSONContent 用于丰富格式。

使用纯文本时,将生成简单无样式的页脚。使用序列化的 Tiptap JSONContent(通过 JSON.stringify())时,可保留加粗、斜体、链接等丰富格式。

完整示例

import { ExportEpub } from '@tiptap-pro/extension-export-epub'

const editor = new Editor({
  extensions: [
    // 其他扩展...
    ExportEpub.configure({
      token: 'YOUR_TOKEN',
      headers: {
        evenAndOddHeaders: true,
        default: '我的文档 - 机密',
        first: '欢迎阅读我的文档',
        even: '我的文档 - 偶数页',
      },
      footers: {
        evenAndOddFooters: true,
        default: '公司名称 - 版权所有',
        first: '草稿版本 1.0',
        even: '公司名称 - 偶数页脚',
      },
    }),
    // 其他扩展...
  ],
})

// 导出带有页眉和页脚的 EPUB
editor
  .chain()
  .exportEpub({
    onCompleteExport(result) {
      const url = URL.createObjectURL(result)
      const a = document.createElement('a')

      a.href = url
      a.download = '带页眉的文档.epub'
      a.click()

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

简单的页眉和页脚

如果您不需要奇偶页不同的页眉,可以只提供 default 值:

ExportEpub.configure({
  token: 'YOUR_TOKEN',
  headers: {
    default: '我的文档标题',
  },
  footers: {
    default: '页面页脚 - 公司名称',
  },
})