Vue 文档编辑器快速上手指南：如何把 Vue 应用变成 A4 纸式的在线文档-育师

Vue 文档编辑器快速上手指南：如何把 Vue 应用变成 A4 纸式的在线文档

【免费下载链接】vue-document-editor:page_facing_up: Paper-sized WYSIWYG document editor for Vue apps项目地址: https://gitcode.com/gh_mirrors/vu/vue-document-editor

Vue 文档编辑器（vue-document-editor）是一个把内容按 A4 纸分页渲染的富文本组件：你丢给它一段 HTML，它会算出文字溢出后翻到哪一页，并且兼容浏览器原生打印。它最适合"文档已经生成好，只让用户微调后打印或保存"这类场景——合同、发票、报告预览都算。先泼一盆冷水：它不是完整的文字处理器，不带工具栏，定位是"可定向修改的文档页面"，选型前想清楚这点。

三步把示例跑起来：Vue 文档编辑器快速上手

仓库自带一个完整可玩的示例应用，不用你先写任何组件就能看效果：

git clone https://gitcode.com/gh_mirrors/vu/vue-document-editor cd vue-document-editor && npm install && npm run serve

npm run serve会启动本地开发服务器并开启热更新，浏览器打开后就能看到分页、缩放、页眉页脚这些功能同时工作。示例的入口是 src/Demo/Demo.vue，顶部的工具栏来自另一个独立组件vue-file-toolbar-menu，本库自身不包含任何工具栏。

如果是要集成到你已有的 Vue 3 项目，一条命令的事（Vue 2 项目请装@1大版本）：

npm install vue-document-editor

项目里每个目录各管什么

代码量其实不大，核心就两个目录，结构一眼能看穿：

路径	职责（人话版）
src/DocumentEditor/DocumentEditor.vue	库的入口组件本体（package.json 的 main 指向它），负责渲染"纸张"、分页和样式变量
src/DocumentEditor/imports/page-transition-mgmt.js	分页算法：内容溢出时，把文字"逐词"搬到下一页的 DOM 工具函数
src/Demo/Demo.vue	示例应用主文件，演示了工具栏、撤销/重做、Ctrl+滚轮缩放等集成写法
src/Demo/InvoiceTemplate.ce.vue	交互式模板页示例（一张发票），`.ce.vue`是 Vue 自定义元素的命名约定
src/main.js	示例的启动文件，把 Demo.vue 挂到页面上，顺便开了 devtools
public/index.html	页面模板；docs/ 则是`npm run build`产出的线上演示站
API.md	全部 props、data 和样式变量的参考文档，配置时第一站
package.json	依赖与脚本：`serve`跑演示，`build`一次构建演示站和库文件

关键机制：content 怎么变成一页页纸

整个组件的灵魂只有一个必填项v-model:content，它必须是一个数组，数组的每一项等于一次强制分页（相当于你预设的分页符）：

<vue-document-editor v-model:content="content" :page_format_mm="[210, 297]" />

content里既可以放 HTML 字符串（超出一页会自动按词拆分到下一页），也可以放交互式模板对象{ template: markRaw(你的组件), props: {} }（整页占位，超出部分会被裁掉）。纸张大小由page_format_mm控制（默认 A4 的 210×297 毫米），边距用page_margins传 CSS 值，页眉页脚、页码则通过overlay回调按页注入 HTML。想锁住页面里的某些区域不让用户改，给那个标签加contenteditable="false"即可。所有可配置项的完整清单都在 API.md，配置前建议先查一眼名字和默认值。

另外注意 package.json 里build脚本是两段式：前半段把演示应用打包进docs/，后半段把DocumentEditor.vue单独构建成可发布的库文件——你npm install拿到的就是后者。

⚠️ 用它之前必须知道的坑

官方把限制写得很直白，这几点决定了它适不适合你的项目：

撤销/重做没有原生支持：因为每次输入都要重排 HTML，浏览器自己的历史记录就丢了。得自己监听content变更、存快照做栈，Demo.vue 里就有现成实现可抄
分页只认纯 HTML 内容：Vue 模板页（交互式模板）不会参与分页，超长内容会被隐藏
长文性能：大段文字要拆成多个段落，页数很多时整体会变慢
表格和图片：内置排版只管文字，图片/表格的定位和尺寸要自己实现
Safari 打印会强加打印边距，需要手动选无边距纸张

接下来去哪

上手之后，把 src/Demo/Demo.vue 当成"可复制粘贴的参考答案"，需要页眉页脚、撤销栈、缩放交互时直接对着抄；要调纸张和边距就翻 API.md。项目采用 MIT 协议，商用没负担。如果文档没覆盖你的问题，去项目的 Issue 区翻翻同类需求，多数"看起来像 bug"的行为其实都是上面那些已知限制的延伸。

【免费下载链接】vue-document-editor:page_facing_up: Paper-sized WYSIWYG document editor for Vue apps项目地址: https://gitcode.com/gh_mirrors/vu/vue-document-editor

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考