1.文档地址
Installing ONLYOFFICE Docs for Docker on a local server - ONLYOFFICE
2.安装onlyoffice
docker run -i -t -d -p 9000:8000 --restart=always -e JWT_ENABLED=false onlyoffice/documentserver如果发现镜像无法下载,可以尝试更换镜像源
{"registry-mirrors": ["https://do.nark.eu.org","https://dc.j8.work","https://docker.m.daocloud.io","https://dockerproxy.com","https://docker.mirrors.ustc.edu.cn","https://docker.nju.edu.cn"]
}
参考从Docker Hub 拉取镜像一直失败超时？这些解决方案帮你解决烦恼_docker拉取镜像超时-CSDN博客
3.启动成功后,访问服务,查看服务是否启动成功
访问时,localhost和127.0.0.1都可以试试,可能有些不能访问
访问 http://localhost:9000/welcome/
访问 http://localhost:9000/web-apps/apps/api/documents/api.js
说明启动成功
4.集成到vue
<script type='text/javascript' src='http://localhost:9000/web-apps/apps/api/documents/api.js'></script>
//onlyoffice测试{path: "/onlyoffice",name: "onlyoffice",component: () => import("@/views/onlyoffice/test.vue"),},
test.vue 文件内容
<template><div id="app"><div class="qualityManual-container"><div><button style="width: 120px" type="primary" @click="getFile">测试预览office文档</button><button style="width: 120px" type="primary" @click="close">关闭</button></div><div v-if="show" class="qualityManual-container-office"><vab-only-office :option="option" /></div></div></div>
</template><script>
import vabOnlyOffice from "./VabOnlyOffice.vue";export default {name: "App",components: {vabOnlyOffice,},data() {return {//参考vabOnlyOffice组件参数配置option: {url:"http://192.168.0.104:8003/system/api/file/attachment/2024-07-13/1812066832136409088.docx",isEdit: "",fileType: "",title: "",lang: "",isPrint: "",user: { id: null, name: "" },},show: false,};},methods: {getFile() {this.show = true;// getAction('/file/selectById', { id: this.id }).then(res => {this.option.isEdit = false;this.option.lang = "zh-CN";this.option.url ="http://192.168.0.104:8003/system/api/file/attachment/2024-07-13/1812066832136409088.docx";this.option.title = "123";this.option.fileType = "docx";this.option.isPrint = false;this.option.user = { id: 12, name: "张三" };// })},close() {this.show = false;},},
};
</script><style>
html,
body {height: 100%;
}
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;height: 100%;
}
.qualityManual-container {padding: 0 !important;height: 100%;
}
.qualityManual-container-office {/* mobile width: 0px;*//* desktop */width: 100%;height: calc(100% - 55px);
}
</style>
VabOnlyOffice.vue 文件内容
<!--onlyoffice 编辑器-->
<template><div id="vabOnlyOffice"></div>
</template><script>
export default {name: "VabOnlyOffice",props: {option: {type: Object,default: () => {return {};},},},data() {return {doctype: "",docEditor: null,};},beforeDestroy() {if (this.docEditor !== null) {this.docEditor.destroyEditor();this.docEditor = null;}},watch: {option: {handler: function (n) {this.setEditor(n);this.doctype = this.getFileType(n.fileType);},deep: true,},},mounted() {if (this.option.url) {this.setEditor(this.option);}},methods: {async setEditor(option) {if (this.docEditor !== null) {this.docEditor.destroyEditor();this.docEditor = null;}this.doctype = this.getFileType(option.fileType);let config = {document: {//后缀fileType: option.fileType,key: option.key || "",title: option.title,permissions: {edit: option.isEdit, //是否可以编辑: 只能查看，传falseprint: option.isPrint,download: false,// "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。// "review": true //跟踪变化},url: option.url,},documentType: this.doctype,editorConfig: {callbackUrl: option.editUrl, //"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置lang: option.lang, //语言设置//定制customization: {autosave: false, //是否自动保存chat: false,comments: false,help: false,// "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false//是否显示插件plugins: false,},user: {id: option.user.id,name: option.user.name,},mode: option.model ? option.model : "edit",},width: "100%",height: "100%",token: option.token || "",type: "desktop", //desktop 或 'mobile' 根据设备类型};// eslint-disable-next-line no-undef,no-unused-varsthis.docEditor = new DocsAPI.DocEditor("vabOnlyOffice", config);},getFileType(fileType) {let docType = "";let fileTypesDoc = ["doc","docm","docx","dot","dotm","dotx","epub","fodt","htm","html","mht","odt","ott","pdf","rtf","txt","djvu","xps",];let fileTypesCsv = ["csv","fods","ods","ots","xls","xlsm","xlsx","xlt","xltm","xltx",];let fileTypesPPt = ["fodp","odp","otp","pot","potm","potx","pps","ppsm","ppsx","ppt","pptm","pptx",];if (fileTypesDoc.includes(fileType)) {docType = "text";}if (fileTypesCsv.includes(fileType)) {docType = "spreadsheet";}if (fileTypesPPt.includes(fileType)) {docType = "presentation";}return docType;},},
};
</script>
打开页面
预览文档 时 如果出现 下载失败 按下面解决方法
编辑docker中/etc/onlyoffice/documentserver/default.json下的内容
搜索并修改以下字段为true
可以使用docker容器内的nano default.json 命令编辑文件,然后重启容器
"request-filtering-agent" : {"allowPrivateIPAddress": true,"allowMetaIPAddress": true
},参考文档 OnlyOffice 打开文档时提示下载失败_onlyoffice 下载失败-CSDN博客
desktop 效果
mobile效果
如果需要在线编辑和保存,可参考以下文章
SpringBoot中整合ONLYOFFICE在线编辑_springboot 集成 onlyoffice-CSDN博客
