当前位置:首页 > 网站建设 > 正文内容

vue.js引入html(vue 引入html代码片段)

网站建设2周前 (07-10)106

一、onlyoffice是什么

ONLYOFFICE 是一个开源的办公套件,适合多人在线协作。由总部位于总部在拉脱维亚的 IT 公司Acensio System SIA 开发。它提供在线协作文档编辑器(包括文档、电子表格、演示文稿和表单),适用于 Windows、Linux、macOS、Android 和 iOS 系统。也可以将 ONLYOFFICE 集成到学习管理平台、同步与共享平台、企业管理系统等,甚至集成到你自己的应用程序中。ONLYOFFICE同微软office、金山WPS的功能相似,可以看成是同一类软件产品,但ONLYOFFICE的源代码是开源的。另外,表单Forms是ONLYOFFICE 的一大特色功能,能直接在编辑器内创建表单,可以实现类似于web表单功能和精细化权限控制。

ONLYOFFICE比MS OFFICE、WPS更强大的功能就是插件机制,支持安装丰富的插件,比如OCR、ChatGPT、自动翻译、视频通话、文本转换、生成参考文献、拼写检查等,大部分插件都免费使用的,可以在线安装。

ONLYOFFICE支持集成ChatGPT插件。ChatGPT是由人工智能研究实验室OpenAI在2022年11月30日发布的全新聊天机器人模型,一款技术驱动的自然语言处理工具。它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,真正像人类一样来聊天交流,甚至能完成撰写邮件、视频脚本、文案、翻译、代码等任务。在插件管理器中,找到 ChatGPT 并点击安装。

展开全文

运行ChatGPT,输入对应的密钥(需要通过科学上网,在OpenAI官网 (opens new window)中获取API Key,目前国内用户无法注册获取。 ),然后就在可以在onlyoffice中使用ChatGPT了。

ONLYOFFICE的插件机制为开发者提供了极大灵活性,开发者可以通过底层API接口自定义插件实现业务上复杂需求,比如:协同办公OA项目收发文的正文创建、编辑和下载;合同管理项目中合同协议的自动生成等。云程低代码开发平台(http://www.yunchengxc.com)对开源版ONLYOFFICE进行了集成整合,可以表单和流程中直接使用office文档控件,并可配置文档模版路径,表单字段值自动带入,控制文档是否可编辑,文档是否只读,是否加载水印,是否可以打印,是否可以另存下载,是否需要留痕,是否显示留痕等权限。

二、项目如何集成onlyoffice

在springboot+vue项目中集成开源版onlyoffice组件,如果是私有化部署的项目,首先需要部署onlyoffice后端服务,然后使用onlyoffice的前端API进行web集成调用。

1、安装onlyoffice后端服务

onlyoffice后端服务安装依赖RabbitMQ、Redis、PostgreSQL这些服务,支持在windows、Linux下安装,也支持docker安装。安装方法这里不再展开描述,详细请参考官方安装文档:https://www.onlyoffice.org.cn/guide/docker-onlyoffice.html

2、Web前端集成onlyoffice

onlyoffice提供了基于Javascript的API接口,https://documentserver/web-apps/apps/api/documents/api.js

Web前端调用示例如下:

!DOCTYPE htmlhtml

head

meta charset="UTF-8"

titleONLYOFFICE使用方法/title

!-- 引入外部JavaScript文件 --

script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"/script

/head

body

div id="placeholder"/div

script language="javascript" type="text/javascript"

var docEditor = new DocsAPI.DocEditor("placeholder",{

"document": {

"fileType": "docx",

"key": "Khirz6zTPdfd7",

"title": "Example Document Title.docx",

"url": "https://example.com/url-to-example-document.docx"

},

"documentType": "word",

"editorConfig": {

"callbackUrl": "https://example.com/url-to-callback.ashx"

}

});

/script

/body/html

另外,onlyoffice还提供了vue、React 、Angular 语言的组件,可以在您的项目中从 npm 安装 ONLYOFFICE 文档相关组件

npm install --save @onlyoffice/document-editor-vue

npm install --save @onlyoffice/document-editor-react

npm install --save @onlyoffice/document-editor-angular

3、onlyoffice关键功能的API接口

业务系统中集成onlyoffice,常常涉及到的功能有:模版路径配置,表单字段自动带值,文档是否可编辑,文档是否只读,是否加载水印,是否可以打印,是否可以另存下载,是否需要留痕,是否显示留痕等权限,onlyoffice分别提供了相关的API接口。

请参考官方文档:https://api.onlyoffice.com

4、自定义插件实现表单字段自动带值

在OA电子公文、合同管理等业务系统中,常常需要把web表单字段的值自动带入到word文档中,比如:合同编号、合同标题等字段,如果使用微软office,可以使用窗体域结合vba编程,实现字段值自动同步。Onlyoffice 提供了强大的插件机制,可以自定义插件插件实现表单字段值自动带入功能。

我们先来看下onlyoffice插件目录结构:

├── config.json # 插件配置文件

├── icon.png # 插件图标

├── index.html # 插件入口文件

├── interface.js # 插件功能实现

├── plugins.js # 插件主程序入口文件

└── translations # 国际化配置

└── zh-CN.json

插件结构非常简单,里面主要是 config.json、index.html、plugins.js 和 interface.js。需要保证config.json、index.html、interface.js、plugins.js这四个文件在同一个文件夹当中, 然后将文件夹放入到容器内的/var/www/onlyoffice/documentserver/sdkjs-plugins目录下, 重启即可。

# config.json参数说明

{

"guid": "asc.{11700c35-1fdb-4e37-9edb-b31637139601}",

"variations": [

{

"url": "index.html",

"EditorsSupport": ["word", "cell", "slide"],

"isSystem": true,

"initDataType": "none",

"initData": "",

"buttons": [],

"events" : [

"onClick"

]

}

]

}

- guid:插件的唯一值, 可自行更改, 但格式必须是asc.{}

- url: 在本插件中该html的作用主要是用来加载js

- EditorsSupport:声明该插件在word、excel、ppt可用

- isSystem:设置该值为true后在菜单栏中不显示该插件, 后台自动运行该插件

- events:声明事件

其他参数请看官方文档:https://api.onlyoffice.com/plugin/config

plugins.js一般在onlyoffice容器内的/var/www/onlyoffice/documentserver/sdkjs-plugins/v1目录下, 可以直接从里边拿过来复用。

interface.js就是插件功能的逻辑了,以下是interface.js代码,主要实现了表单字段自动带值功能。

(function(window, undefined) {

var AscPlugin = window.Asc.plugin;

var executeMethod = function(method, arg) {

return window.Asc.plugin.executeMethod(method, arg);

};

AscPlugin.init = function(initData) {

// 避免绑定多次

if(!window['boundInternalcommand']){

// 该事件监听似乎在7.x版本后就失效了 我还没尝试过

window.parent.Common.Gateway.on('internalcommand', function(args) {

// 如果需要自定义插件的功能, 只需要在这个方法里接受参数写逻辑就行

var data = args.data;

var command = args.command;

//设置表单字段值

if(command=="SetFormValue"){

window.Asc.plugin.executeMethod ("GetFormsByTag", [data[0]], function (res) {

this.Asc.plugin.executeMethod ("SetFormValue", [res[0].InternalId,data[1]]);

});

}else if(command=="GetFileToDownload"){//获取文件

window.Asc.plugin.executeMethod ("GetFileToDownload", Array.isArray(data) ? data : [data], function(res){

var obj = {

"cmd":"GetFileToDownload",

"url":res

}

window.parent.parent.postMessage(JSON.stringify(obj), "*");

});

}else{

(Array.isArray(data) ? data : [data]).forEach(function(arg, index) {

// 6.x版本中的api不支持批量的操作, 只能单个插入, 这里需要一个定时器才能做到批量的插入, 否则会报错或者什么都不插入

setTimeout(function() {

executeMethod(command, [arg]);

}, 100 * index);

});

}

});

window['boundInternalcommand'] = true;

}

// 在插件弹出窗外释放鼠标时触发

AscPlugin.onExternalMouseUp = function() {

var event = document.createEvent('MouseEvents');

vue.js引入html(vue 引入html代码片段)

event.initMouseEvent('mouseup', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);

document.dispatchEvent(event);

};

AscPlugin.button = function(id) {

// 关闭插件弹出窗触发

if (id === -1) {

this.executeCommand('close', '');

}

};

};

})(window, undefined);

核心代码:

window.Asc.plugin.executeMethod ("GetFormsByTag", [data[0]], function (res) {

this.Asc.plugin.executeMethod ("SetFormValue", [res[0].InternalId,data[1]]);

});

GetFormsByTag:根据标签获取表单控件

SetFormValue:设置表单控件值

插件调用:

this.docEditor.serviceCommand("SetFormValue", [tagName,value]);

最后实现的效果如下:

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://muyuzhen.com/post/118153.html

分享给朋友:

“vue.js引入html(vue 引入html代码片段)” 的相关文章

欧美网站建设(立足欧美的网站)

欧美网站建设(立足欧美的网站)

今天给各位分享欧美网站建设的知识,其中也会对立足欧美的网站进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、欧美网站的设计风格好吗? 2、网站风格主要包括哪些 3、网站设计怎样才能达到欧美风格 4、网站设计风格有哪些? 欧美网站的设计风格好吗?...

济南网站制作(济南网站制作设计)

济南网站制作(济南网站制作设计)

今天给各位分享济南网站制作的知识,其中也会对济南网站制作设计进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、济南做网站公司哪家好 2、济南网站制作哪个靠谱? 3、济南网站设计一般多少钱?哪个公司能做? 4、济南网站建设哪家便宜 5、济南网站制...

网站打开速度优化(如何进行网站打开速度优化)

网站打开速度优化(如何进行网站打开速度优化)

本篇文章给大家谈谈网站打开速度优化,以及如何进行网站打开速度优化对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、如何对网站进行优化提速. 2、如何优化网站速度 3、网站打开速度慢怎么办,如何优化 4、如何优化网页加载速度 如何对网站进行优化提速. 方法/步骤...

包含洛阳网站建设的词条

包含洛阳网站建设的词条

今天给各位分享洛阳网站建设的知识,其中也会对进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、洛阳做网站建设哪家好 2、洛阳网站建设哪家好?洛阳专业做网站公司有哪些? 3、在洛阳建个网站一般要多少钱啊? 洛阳做网站建设哪家好 洛阳做网站的公司不少,但...

关于青岛网站制作的信息

关于青岛网站制作的信息

今天给各位分享青岛网站制作的知识,其中也会对进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、青岛网站建设哪里好的呢? 2、青岛企业网站搭建怎么制作 3、想知道山东青岛好的网站建设公司有哪些? 4、青岛网站制作哪里有 5、青岛网站建设公司哪家不...

怎样优化网站(怎样优化网站搜索排名)

怎样优化网站(怎样优化网站搜索排名)

今天给各位分享怎样优化网站的知识,其中也会对怎样优化网站搜索排名进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、网站优化有哪些方法? 2、网站优化的步骤与方法 3、怎么做网站优化 网站优化有哪些方法? 方法一、分析网站的内容。看看网站的内容质量如何...