首页 前端知识 vue快速集成word在线编辑

vue快速集成word在线编辑

2024-05-30 10:05:06 前端知识 前端哥 810 523 我要收藏

word在线编辑

查看一些文档金格插件WebOffice2015、chrome浏览器插件、only-officeUEditorTinyMCECKEditorwangeditorcanvas-editor

最后选择了only-officecanvas-editor

only-office非常功能强大,word、ppt、excel都支持在线编辑预览,还支持协同,又有免费开源版。

附上本地运行demo:

一、安装docker

二、安装并启动 Onlyoffice 服务:

docker run -i -t -d -p 8701:80 onlyoffice/documentserver:版本号

如果是第 1 次执行这个命令,会先去下载 Onlyoffice,比较慢,约等待 3~10 分钟,网络畅通一点的会快一些。如果是已经安装过则直接进行启动。

三、启动内置服务

先执行 docker ps 查看 Onlyoffice 容器 ID:

# 注意这里要将 id 替换成自己的
docker exec -it f2a3eb675ad1 /bin/bash

然后执行 docker exec -it ID /bin/bash 进入容器,这里将获取到的 ID 替换一下:

# 启动所有的内置服务
supervisorctl restart all
# 退出容器
exit

最后访问 http://IP:8701/example 页面(这里要注意,IP 不能是 localhost 和 127.0.0.1,一定要用真实 IP 来访问)

因为开发周期,后端又比较懒不想花时间去看文档。这一方案被我放弃了

最后选择了canvas-editor

canvas-editor

为什么选它了,开发周期短,界面与word编辑器比较像,可以快速集成到vue,虽然作者没有开箱即用版。

在vue中主要实现方式就是采用开源项目代码。

在组件模块,新建vue文件,html采用开源项目代码,分3个部分,工具栏,侧边菜单,主要内容,底部工具,旁边批注。通过import引入开源样式,注意样式冲突。在onMounted,采用开源main.ts window.onload代码。

<div class="menu" editor-component="menu">
...
</div>
<div class="catalog" editor-component="catalog">
...
</div>
<div id="canvasEditor" class="canvas-editor"></div>
<div class="footer-canvas" editor-component="footer">
...
</div>
const instance = new Editor(
    document.querySelector('#canvasEditor'),
    {
      header: props.header,
      main: props.main,
      footer: props.footer
    },
    options
);
console.log('实例', instance);
editorRef.value = instance;

// 工具栏方法 例:
// 2. | 撤销 | 重做 | 格式刷 | 清除格式 |
const undoDom = document.querySelector('.menu-item__undo');
    undoDom.title = `撤销(${isApple ? '⌘' : 'Ctrl'}+Z)`;
    undoDom.onclick = function () {
    console.log('undo');
    instance.command.executeUndo();
};

<style lang="scss" scoped>
#canvasEditor {
  display: flex;
  justify-content: center;
  background: #f2f4f7;
}
@import url(@/assets/css/dialog.css);
@import url(@/assets/css/signature.css);
</style>

思路通过富文本编辑器实现在线编辑功能,通过插件提供的api获取图片base64和文本数据,通过接口保存至数据库,通过列表数据复显编辑,后端获取到图片数据转pdf或者其他格式都可以。自己转pdf则是通过html2canvas jspdf

使用方式

例:
<canvas-editor
  v-if="!loadingInit"
  :header="canvasEditor.header"
  :main="canvasEditor.main"
  :footer="canvasEditor.footer"
  :options="canvasEditor.options"
  @getCanvasEditorData="getCanvasEditorData"
/>
import CanvasEditor from '@/components/editor/index.vue';

components: {
  CanvasEditor
},

canvasEditor: {
  main: [],
  options: [],
  header: [],
  footer: []
},

// getCanvasEditorData 事件

主要获取富文本 main内容 image的base64 options配置项 用于数据保存

getCanvasEditorData: ({ value, imgage, options }) => {  
},

image.png

主要配置

    // 页眉配置
    header: {
      type: Array,
      default: []
    },
    // 主要编辑内容
    main: {
      type: Array,
      default: []
    },
    // 页脚信息
    footer: {
      type: Array,
      default: []
    },
    // 
    options: {
      type: Object,
      default: {}
    },
    // 批注 TODO
    commentList: {
      type: Array,
      default: []
    }

完整配置

interface IEditorOption {
  mode?: EditorMode // 编辑器模式:编辑、清洁(不显示视觉辅助元素。如:分页符)、只读、表单(仅控件内可编辑)、打印(不显示辅助元素、未书写控件及前后括号)。默认:编辑
  defaultType?: string // 默认元素类型。默认:TEXT
  defaultColor?: string // 默认字体颜色。默认:#000000
  defaultFont?: string // 默认字体。默认:Microsoft YaHei
  defaultSize?: number // 默认字号。默认:16
  minSize?: number // 最小字号。默认:5
  maxSize?: number // 最大字号。默认:72
  defaultBasicRowMarginHeight?: number // 默认行高。默认:8
  defaultRowMargin?: number // 默认行间距。默认:1
  defaultTabWidth?: number // 默认tab宽度。默认:32
  width?: number // 纸张宽度。默认:794
  height?: number // 纸张高度。默认:1123
  scale?: number // 缩放比例。默认:1
  pageGap?: number // 纸张间隔。默认:20
  underlineColor?: string // 下划线颜色。默认:#000000
  strikeoutColor?: string // 删除线颜色。默认:#FF0000
  rangeColor?: string // 选区颜色。默认:#AECBFA
  rangeAlpha?: number // 选区透明度。默认:0.6
  rangeMinWidth?: number // 选区最小宽度。默认:5
  searchMatchColor?: string // 搜索高亮颜色。默认:#FFFF00
  searchNavigateMatchColor?: string // 搜索导航高亮颜色。默认:#AAD280
  searchMatchAlpha?: number // 搜索高亮透明度。默认:0.6
  highlightAlpha?: number // 高亮元素透明度。默认:0.6
  resizerColor?: string // 图片尺寸器颜色。默认:#4182D9
  resizerSize?: number // 图片尺寸器大小。默认:5
  marginIndicatorSize?: number // 页边距指示器长度。默认:35
  marginIndicatorColor?: string // 页边距指示器颜色。默认:#BABABA
  margins?: IMargin // 页面边距。默认:[100, 120, 100, 120]
  pageMode?: PageMode // 纸张模式:连页、分页。默认:分页
  tdPadding?: IPadding // 单元格内边距。默认:[0, 5, 5, 5]
  defaultTrMinHeight?: number // 默认表格行最小高度。默认:42
  defaultColMinWidth?: number // 默认表格列最小宽度(整体宽度足够时应用,否则会按比例缩小)。默认:40
  defaultHyperlinkColor?: string // 默认超链接颜色。默认:#0000FF
  header?: IHeader // 页眉信息。{top?:number; maxHeightRadio?:MaxHeightRatio;}
  footer?: IFooter // 页脚信息。{bottom?:number; maxHeightRadio?:MaxHeightRatio;}
  pageNumber?: IPageNumber // 页码信息。{bottom:number; size:number; font:string; color:string; rowFlex:RowFlex; format:string; numberType:NumberType;}
  paperDirection?: PaperDirection // 纸张方向:纵向、横向
  inactiveAlpha?: number // 正文内容失焦时透明度。默认值:0.6
  historyMaxRecordCount?: number // 历史(撤销重做)最大记录次数。默认:100次
  printPixelRatio?: number // 打印像素比率(值越大越清晰,但尺寸越大)。默认:3
  maskMargin?: IMargin // 编辑器上的遮盖边距(如悬浮到编辑器上的菜单栏、底部工具栏)。默认:[0, 0, 0, 0]
  letterClass?: string[] // 排版支持的字母类。默认:a-zA-Z。内置可选择的字母表类:LETTER_CLASS
  contextMenuDisableKeys?: string[] // 禁用的右键菜单。默认:[]
  scrollContainerSelector?: string // 滚动区域选择器。默认:document
  wordBreak?: WordBreak // 单词与标点断行:BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认:BREAK_WORD
  watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string;}
  control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string;}
  checkbox?: ICheckboxOption // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string;}
  radio?: IRadioOption // 单选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string;}
  cursor?: ICursorOption // 光标样式。{width?: number; color?: string; dragWidth?: number; dragColor?: string;}
  title?: ITitleOption // 标题配置。{ defaultFirstSize?: number; defaultSecondSize?: number; defaultThirdSize?: number defaultFourthSize?: number; defaultFifthSize?: number; defaultSixthSize?: number;}
  placeholder?: IPlaceholder // 编辑器空白占位文本
  group?: IGroup // 成组配置。{opacity?:number; backgroundColor?:string; activeOpacity?:number; activeBackgroundColor?:string; disabled?:boolean}
  pageBreak?: IPageBreak // 分页符配置。{font?:string; fontSize?:number; lineDash?:number[];}
  zone?: IZoneOption // 编辑器区域配置。{tipDisabled?:boolean;}
  background?: IBackgroundOption // 背景配置。{color?:string; image?:string; size?:BackgroundSize; repeat?:BackgroundRepeat;}。默认:{color: '#FFFFFF'}
  lineBreak?: ILineBreakOption // 换行符配置。{disabled?:boolean; color?:string; lineWidth?:number;}
  separator?: ISeparatorOption // 分隔符配置。{lineWidth?:number; strokeStyle?:string;}
}

页眉配置

interface IHeader {
  top?: number // 距离页面顶部大小。默认:30
  maxHeightRadio?: MaxHeightRatio // 占页面最大高度比。默认:HALF
  disabled?: boolean // 是否禁用
}

页码配置

interface IPageNumber {
  bottom?: number // 距离页面底部大小。默认:60
  size?: number // 字体大小。默认:12
  font?: string // 字体。默认:Microsoft YaHei
  color?: string // 字体颜色。默认:#000000
  rowFlex?: RowFlex // 行对齐方式。默认:CENTER
  format?: string // 页码格式。默认:{pageNo}。示例:第{pageNo}页/共{pageCount}页
  numberType?: NumberType // 数字类型。默认:ARABIC
  disabled?: boolean // 是否禁用
  startPageNo?: number // 起始页码。默认:1
  fromPageNo?: number // 从第几页开始出现页码。默认:0
}

水印配置

interface IWatermark {
  data: string // 文本。
  color?: string // 颜色。默认:#AEB5C0
  opacity?: number // 透明度。默认:0.3
  size?: number // 字体大小。默认:200
  font?: string // 字体。默认:Microsoft YaHei
}

占位文本配置

interface IPlaceholder {
  data: string // 文本。
  color?: string // 颜色。默认:#DCDFE6
  opacity?: number // 透明度。默认:1
  size?: number // 字体大小。默认:16
  font?: string // 字体。默认:Microsoft YaHei
}

canvas-editor官方文档、
git地址

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10051.html
标签
word
评论
发布的文章

使用 mapstructure 解析 json

2024-06-05 13:06:03

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!