onlyOffice+vue implementation basic case
Because the onlyoffice service needs to be integrated in the recent project, then refer to the official website and some other bloggers’ case sharing, and record it yourself 1. First,
install the API in the official document into the server, and then get the static address of the API on the server, use The script tag is introduced into the index.html file
of the project . The imported address is the address of the api on the server . This address in the official document cannot be used. You must configure it yourself. Only after configuring this step can it be used when onlyoffice is instantiated later. If If you don't understand, you can ask your seniors
2. After configuration, go to the project to create a new vue file, write it according to the format of the official document, just write a div and bind an id to it. 3. Now start to
write the configuration content, which is a necessary parameter for onlyoffice instantiation
The configuration is required here, that is, the configuration written in the official document.
fileType : file type, must be lowercase
key : the unique id for the server, the same id will get the file in the server cache (with this key , it will first look for it in the cache according to it), if this is just a trial at the beginning, you can first give an empty string
title : the file name
url : the absolute path of the file to be rendered, this parameter is very important, it passes It is not the local address of the file, but the file needs to be transferred to the server that the project depends on, and then the url address of the file on the server (this generally requires back-end support) can be used. This parameter determines whether it can be instantiated. onlyoffice object
documentType : open document type
editConfig : relevant editor configuration
editConfig->callbackUrl : This parameter is the callback url after the document is saved, that is, the absolute path of the designated document storage service. For trial use, you can pass an empty string first. Does not affect instantiation
There are some commonly used configurations in the edifConfig configuration:
if you have other needs, you can go to the official document
4. Finally, instantiate the object:
5. CallbackUrl callback interface : here you can let the backend define an interface at will, the request method is post, and onlyoffice will automatically call this interface 10s after the page is closed or after the user completes editing, no manual trigger is required, and the interface will be called later end interface to process the modified file, but the interface must return
{
"error":0
}
This returns the body, otherwise onlyoffice will report an error after instantiating it.
Here is my own entire instantiation code for reference:
<template>
<div id="office">
<div id="container"></div>
</div>
</template>
<script>
import {
mapGetters, mapActions } from "vuex";
export default {
name: "office",
data() {
return {
container: `officeContent${
parseInt(Math.random(0, 1) * 100000)}`,
};
},
computed: {
...mapGetters(["cycleInfo", "userInfo"]) },
methods: {
/**
* @description: 实例化onlyoffice对象，渲染到页面
* @params: {Object}
* @author: yanyingxin
*/
initOffice(option) {
// debugger
console.log('init');
try {
let fileType = "xlsx";
let documentType = "spreadsheet";
const config = {
documentType: documentType, // 打开的文档类型（详细的看官网）
document: {
// 这个字段包含了对文档本身的设置
fileType: fileType, // 文件类型，必须小写
key: "", // 给服务端用的唯一id，同一个id就会获取服务器缓存里的文件（有这个key，就会先根据它去缓存里找），文件一旦被保存过或者修改过，就对应一个新的id；url也能做key但是不能有特殊字符并且长度小于128字符长度
title: option.title, // 文件名
url: option.url, // 必须绝对路径，源文件所在的地方
permissions: {
// 权限控制
// fillForms: true,
// comment: false, // 评论功能的开关
copy: true, // 允许复制内容
download: true, // 是否允许下载（其实就是另存为，因为保存就是保存在服务器）
edit: true, // 是否允许编辑文档（这里是历史记录，不允许编辑)
print: true, // 是否允许打印
review: true, // 可编辑时才可用，功能没试过，应该是协同编辑下的评审
save: true,
},
},
editorConfig: {
// 对编辑器（而非文档本身）的设置
callbackUrl: `${
process.env.DMS_URL}/xx/xx/config_parser/callback?cycle_id=${
option.cycleId}&project_id=${
option.projectId}&fileName=${
option.title}`,// 指定文档存储服务的绝对路径
lang: "zh-CN", // 编辑器ui的语言
location: "", // 用于设置计量单位 比如us、ca（设成英寸）
mode: "edit", // 设定文档打开的时候处于什么状态 默认为edit
user: {
// 当前正在view/edit此文档的用户信息
name: this.userInfo.name, // full name
},
customization: {
// autosave: false,
forcesave: true, // 启用保存按钮
logo: {
image: "http://minio.xxx.com:xxxx/xx/xx.png",
imageEmbedded: "http://xx.xx.xxx.xx/favicon-7.ico",
url: "http://xxx.com.cn",
},
customer: {
address: "xx市xx区xx路700号",
info: "提供高效、协调的团队协作方式",
mail: "[email protected]",
name: "KR",
www: "http://xxx.com.cn",
},
},
},
events: {
onRequestSaveAs: () => {
console.log("save file>>>>>>>>>>>>>>");
},
},
};
console.log('config', config);
const docEditor = new DocsAPI.DocEditor("container", config);
} catch (error) {
console.log("error", error);
}
},
},
};
</script>
<style>
iframe {
height: 700px !important;
border: 2px #ccd0dc solid;
}
</style>
This code cannot be copied and pasted directly. Some parameters in it need to be configured and added before they can be used, but the overall logic and structure are like this. I hope it will be helpful to future generations.