vue快速集成word在线编辑

   日期:2024-12-29    作者:aqwl7 移动:http://oml01z.riyuangf.com/mobile/quote/79131.html

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

最后选择了only-officecanvas-editor

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

附上本地运行demo:

 

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

三、启动内置服务

先执行 docker ps 查看 Onlyoffice 容器 ID

 

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

 

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

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

最后选择了canvas-editor

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

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

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

 

onMounted 核心使用源码示例

 
 

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

引入使用组件

 
 
 
 
 
 
 
 
 
 
 
 
 

 

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号