企业官网建设流程全解析

Vue 文档编辑器完整指南：如何在 Vue 3 中做纸张级 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-document-editor 是一个为 Vue 应用打造的纸张尺寸所见即所得文档编辑器，它把内容像真正的纸一样排布：写满第一页就自动翻出新的一页。本文把它的适用场景、实现机制和上手路径一次讲清。

发票、合同这类预格式化文档怎么改

想象你在做一个开票系统：单据的抬头、金额表格、签字栏是定死的，客户只需要填几个字段。普通富文本编辑器给你的是一个可以无限滚动的长文档，看起来就不像"纸"，打印出来也很容易错位。vue-document-editor 把"页"当成一等公民：每一页都按真实物理尺寸排版（默认 A4，210×297 毫米），屏幕上看到的就是打印出来的样子。仓库里的演示就是一个可编辑的发票模板，每一页都是用 Vue 组件搭出来的交互页面。

原理速览：contenteditable 加 JavaScript 分页

机制并不神秘：每一页其实是一个固定尺寸的 div，由浏览器原生的 contenteditable 负责编辑，JavaScript 负责测量溢出、把多余内容推给下一页。麻烦在于 Vue 要管 DOM，contenteditable 又直接改 DOM，两边会打架。于是 v2.1 的核心重写把页面内容区"静态提升"了出来，让 Vue 只管渲染结构、contenteditable 自由操作——这也是为什么 Vue 组件能直接当交互页面模板用，还不会丢掉交互性。

功能亮点：页面呈现、交互能力与打印输出

• 页面呈现：纸张格式与边距都按毫米设置，边距还能按页码区分。✂️ 内容超出页面时按单词自动分页（实验性功能，限纯 HTML 内容）；也可以声明哪些元素"不许拆"，让它整体挪到下一页，比如表格行不再被拦腰截断。每页还能叠加自定义覆盖层：页眉、页脚、页码。
• 交互能力：Vue 组件可以直接当交互页面用（演示里的发票就是）；页面内可以锁定某些区域，只让可编辑字段可编辑。它还能读出光标位置处的完整样式——标题级别、是否列表、下划线——是搭工具栏的现成数据源。
• 显示与输出：网格、横向、纵向三种页面显示模式，外加缩放；打印原生兼容，不用再过一层 PDF 转换，直接调用浏览器打印即可 🖨️。

三步跑起来

Vue 3 项目里安装一行命令即可：npm install vue-document-editor（Vue 2 项目装 1.x 版本）。然后引入组件，用 v-model:content 把内容绑成一个数组——每个数组项是一组页面的 HTML 内容，或者一个交互页面模板。完整用法（包括手动实现撤销/重做）见 Demo.vue。

版本演进：为 Vue 3 重写核心之后

项目目前处于 2.x 版本。关键节点：v2.0 把主分支切到 Vue 3，Vue 2 用户则保留在独立分支；v2.1 重写核心（静态提升 + 去掉 SCSS 依赖），从此模板组件需要用 .ce.vue 扩展名；v2.2 到 v2.3 集中修了不少实战问题：按页码设置边距、表格行跨页、Safari 光标异常、空页删除卡死……完整变更可以看 CHANGELOG.md。如果你也在为分页或打印对不齐发愁，欢迎去提 issue 或 PR——这类工具，社区一起磨才会越来越趁手。

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