前言

近期在做一个项目，需要用到大量的word模板生成对应资料还要打印，之前想的是用一款富文本编辑器即可使用，无赖客户比较刁钻要求系统中看到的所有页面尽量和word上效果一样，并且打印出来每一页内容和系统显示的要一致，找了很多编辑器都不支持，类word的分页操作，而且打印效果和系统里看到的偏差实在太大，当时困扰了我快半个月没解决，虽然中途有发现一个叫Hufe921/canvas-editor的编辑器使用canvas+ts写的，看起来很不错但是无赖大佬写的开发文档太深奥，完全看不懂，找来找去也没找到对应的替代方案，最后还是决定挑战一下这个高深莫测的东西，功夫不负有心人，在我的不懈努力下最后还是成功将这个插件集成到了我的vue3中，虽然写得非常烂，但还是勉强能用了。

插件

Hufe921/canvas-editor，在github上，比较活跃的一个项目
文档地址：
https://hufe.club/canvas-editor-docs/guide/start.html

使用情况

整体使用下来体验感还是非常不错的，就是功能还在完善中，很多功能还没有，比如我迫切需要的目录自动生成、分割线粗细颜色调整、长表格跨页后只渲染了第一页的内容后面全是空白页等问题，不过除了目录自动生成，分割线和表格问题我都得到了解决，分割线效果我将代码拉取下来自己改了一个版本，并且目前我提交了一个pr，表格问题有一个叫 的大佬也提交了自己的pr，我试了一下非常好用，目前我将我的pr和 ThunderYu 大佬的pr已经合并发布到了npmjs上暂用，当然后期可以关注Hufe921大佬的合并pr情况

参考pr：
https://github.com/Hufe921/canvas-editor/pull/765
https://github.com/Hufe921/canvas-editor/pull/841

优化后发布的包

截图如下
我这边目前的版本是0.9.99
新版本0.9.100，解决了写死蓝色分割线问题（失误）

@liushuai05/canvas-editor
引入方法(三选一)：

yarn add @liushuai05/canvas-editor
npm install @liushuai05/canvas-editor
pnpm install @liushuai05/canvas-editor