首页react tiptap 导出word

react tiptap 导出word

时间: 2025-04-25 09:49:47 浏览: 66

### 如何使用 React Tiptap 实现出 Word 文档为了实现在 React 中利用 Tiptap 导出 Word 文档，可以采用将编辑器的内容转换成 HTML 字符串再进一步处理的方式。Tiptap 是基于 ProseMirror 的所见即所得富文本编辑框架，提供了丰富的 API 和插件支持。 #### 安装依赖库首先，在项目中安装 `react-tiptap` 及其相关依赖项： ```bash npm install @tiptap/react @tiptap/starter-kit ``` 另外还需要引入用于导出功能的相关包来帮助完成文件生成工作： ```bash npm install file-saver html-docx-js ``` #### 创建 Tiptap 编辑器并添加导出按钮创建一个新的组件用来承载 Tiptap 编辑器实例以及提供给用户的操作界面，其中包括一个触发导出行为的按钮。 ```jsx import { Editor, EditorContent } from '@tiptap/react' import StarterKit from '@tiptap/starter-kit' import { useState } from 'react' function MyEditor() { const [editor] = useState(() => new Editor({ extensions: [ StarterKit, ], })) function handleExportToWord() { if (!editor) return // 获取当前编辑器中的HTML内容 const contentHtml = editor.getHTML() // 使用html-docx-js将HTML转为Word文档 var doc = new window.HTMLDocXJS.DocxGen(); doc.loadFromStr(contentHtml); let blob = doc.generate({ type: "blob" }); // 利用FileSaver保存文件到本地 saveAs(blob, "demo_word.docx"); } return ( <> <button onClick={handleExportToWord}>导出为Word</button> <EditorContent editor={editor} /> </> ) } export default MyEditor; ``` 此部分实现了基本的功能逻辑：当点击“导出为Word”的时候会调用 `handleExportToWord()` 方法获取编辑区内的 HTML 并将其转化为 .docx 文件下载下来[^1]。

阅读全文