zt-tiptap-export-word

使用 docx 在浏览器中将 Tiptap / ProseMirror 编辑器正文节点导出为可编辑的 Word .docx 文件。

GitHub: lzt-T/zt-tiptap-export-word Demo: https://tiptap.xjoker.top/

安装

pnpm add zt-tiptap-export-word

消费包时也可以按项目实际包管理工具选择：

npm install zt-tiptap-export-word
yarn add zt-tiptap-export-word

API

exportEditorToWord(element: HTMLElement, options?: ExportEditorToWordOptions): Promise<void>

interface ExportEditorToWordOptions {
  filename?: string
  fontFamily?: string
}

• element：编辑器正文容器，建议传入 editor.view.dom 或 .ProseMirror 节点，不要包含工具栏、弹层等非正文内容。
• options.filename：导出文件名，默认 editor.docx。
• options.fontFamily：导出时使用的字体族，默认 Microsoft YaHei。

支持内容

• 段落、标题、空段落占位。
• 有序列表、无序列表、任务列表。
• 引用、代码块、表格。
• 图片与图片说明文本。
• 块级公式与行内公式。
• 基础行内样式，包括加粗、斜体、下划线、删除线、行内代码、上下标、链接、文字颜色和高亮背景色。

基础用法

import { exportEditorToWord } from 'zt-tiptap-export-word'

const element = document.querySelector('.ProseMirror') as HTMLElement | null

if (element) {
  await exportEditorToWord(element, { filename: 'editor.docx' })
}

配合 zt-reactjs-tiptap 使用

import { ReactTiptapEditor, type ToolbarItemConfig } from 'zt-reactjs-tiptap'
import 'zt-reactjs-tiptap/style.css'
import { exportEditorToWord } from 'zt-tiptap-export-word'

const toolbarItems: ToolbarItemConfig[] = [
  {
    type: 'custom',
    key: 'export-word',
    title: '导出 Word',
    group: 'custom',
    onClick: async ({ editor }) => {
      const element = editor.view.dom as HTMLElement
      await exportEditorToWord(element, { filename: 'editor.docx' })
    },
  },
]

export function EditorDemo() {
  return <ReactTiptapEditor editorMode="headless" toolbarItems={toolbarItems} />
}

限制说明

• 仅支持浏览器环境。
• 当前固定按 A4 纵向和常规页边距导出。
• 暂不包含页眉页脚、水印和高级打印配置。
• 跨域图片需要满足浏览器 canvas / CORS 限制，否则可能无法导出到 Word。
• Word 不内嵌中文字体，只设置字体名；实际显示依赖用户系统或 Office/WPS 可用字体。