带分页的docx编辑器 vue3集成canvas-editor

又有新的需求量了jym,要在页面上渲染docx。本来吧是想用tiptap来完成的,但是需求说要带上分页功能。找半天发现个canvas-editor。

相关资源链接

下面给大家提供相关的项目地址和文档链接:

独立使用流程

如果独立使用的话 只有三步

css 复制代码
npm i @hufe921/canvas-editor --save
bash 复制代码
<div id="warp"></div>
javascript 复制代码
import Editor from '@hufe921/canvas-editor'
 
new Editor(
  document.querySelector('#warp'),
  [
    {
      value: 'lalalalaa'
    }
  ],
  {}
)

操作方法示例

canvas-editor 大多数操作方法在文档中都有详细介绍,这里给出一些使用示例:

kotlin 复制代码
  enum LocationPosition {
    BEFORE = 'before',
    AFTER = 'after',
  }
  
  interface IFocusOption {
    position?: LocationPosition
  }

  const container = document.querySelector<HTMLDivElement>('.editor')!

  const instance = new Editor(
    container,
    {
      main: content.main, // 内容主体
    },
    {
      margins: [80, 90, 80, 90],
      watermark: {
        data: '',
        size: 120,
      }, // 水印
      pageNumber: { // 分页
        format: '第{pageNo}页/共{pageCount}页',
      },
      placeholder: {
        data: '请输入正文',
      },
      maskMargin: [60, 0, 30, 0], // 菜单栏高度60,底部工具栏30为遮盖层,
      width: 1000,
    }, // 可选择项
  )

  instance.command.executeSetHTML({ main: content.main[0].value })
  
  const payloadBefore: IFocusOption = {
    position: LocationPosition.BEFORE,
  }
  
  instance.command.executeFocus(payloadBefore) // 设置初始光标位置
相关推荐
中微子43 分钟前
React 状态管理 源码深度解析
前端·react.js
加减法原则2 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele2 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4532 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友2 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir2 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴3 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子3 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead3 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua4 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf