{"id":35,"date":"2025-10-31T16:16:32","date_gmt":"2025-10-31T08:16:32","guid":{"rendered":"http:\/\/kwitsukasa.top:48088\/?p=35"},"modified":"2025-10-31T16:33:02","modified_gmt":"2025-10-31T08:33:02","slug":"onlyoffice%e5%9c%a8%e7%ba%bf%e6%96%87%e6%a1%a3%e9%9b%86%e6%88%90%e6%96%b9%e6%a1%88","status":"publish","type":"post","link":"https:\/\/blog.kwitsukasa.top\/?p=35","title":{"rendered":"OnlyOffice\u5728\u7ebf\u6587\u6863\u96c6\u6210\u65b9\u6848"},"content":{"rendered":"\n<p>1.\u5728index.html\u6587\u4ef6\u4e2d\u4f7f\u7528script\u5f15\u5165\u540e\u7aef\u670d\u52a1\u90e8\u7f72\u540e\u751f\u6210\u7684onlyOffice js\u6587\u4ef6<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script\n \u00a0type=\"text\/javascript\"\n \u00a0src=\"http:\/\/10.50.192.2:7012\/web-apps\/apps\/api\/documents\/api.js\"\n \u00a0>&lt;\/script><\/code><\/pre>\n\n\n\n<p>2.\u521b\u5efa\u516c\u7528\u914d\u7f6e\u9879<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import website from '\/@\/settings\/website';\nexport function getFile(type, id) {\n \u00a0return {\n \u00a0 \u00a0\/\/\u6587\u4ef6url\u6839\u636e\u5b9e\u9645\u9879\u76ee\u9700\u6c42\u914d\u7f6e\n \u00a0 \u00a0url: `${website.minio}${type}\/${id}.docx`,\n \u00a0 \u00a0\/\/\u6839\u636e\u540e\u7aef\u90e8\u7f72\u914d\u7f6e\u4fdd\u5b58\u6587\u4ef6\u56de\u8c03\u51fd\u6570\n \u00a0 \u00a0editUrl: `http:\/\/10.50.192.2:7001\/onlyOffice\/save?id=${id}&amp;type=${type}`,\n \u00a0 \u00a0isEdit: true,\n \u00a0 \u00a0\/\/\u6839\u636e\u5b9e\u9645\u9879\u76ee\u4f7f\u7528\u6587\u4ef6\u683c\u5f0f\u914d\u7f6e\n \u00a0 \u00a0fileType: 'docx',\n \u00a0 \u00a0title: '\u5728\u7ebf\u7f16\u8f91',\n \u00a0 \u00a0lang: 'zh-CN',\n \u00a0 \u00a0isPrint: false,\n \u00a0 \u00a0token: '',\n \u00a0 \u00a0user: { id: null, name: ' ' },\n  };\n}<\/code><\/pre>\n\n\n\n<p>3.\u521b\u5efa\u6587\u4ef6\u683c\u5f0f\u96c6<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export function getFileType(fileType) {\n \u00a0let docType = '';\n \u00a0const fileTypesDoc = &#91;\n \u00a0 \u00a0'doc',\n \u00a0 \u00a0'docm',\n \u00a0 \u00a0'docx',\n \u00a0 \u00a0'dot',\n \u00a0 \u00a0'dotm',\n \u00a0 \u00a0'dotx',\n \u00a0 \u00a0'epub',\n \u00a0 \u00a0'fodt',\n \u00a0 \u00a0'htm',\n \u00a0 \u00a0'html',\n \u00a0 \u00a0'mht',\n \u00a0 \u00a0'odt',\n \u00a0 \u00a0'ott',\n \u00a0 \u00a0'pdf',\n \u00a0 \u00a0'rtf',\n \u00a0 \u00a0'txt',\n \u00a0 \u00a0'djvu',\n \u00a0 \u00a0'xps',\n  ];\n \u00a0const fileTypesCsv = &#91;'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx'];\n \u00a0const fileTypesPPt = &#91;\n \u00a0 \u00a0'fodp',\n \u00a0 \u00a0'odp',\n \u00a0 \u00a0'otp',\n \u00a0 \u00a0'pot',\n \u00a0 \u00a0'potm',\n \u00a0 \u00a0'potx',\n \u00a0 \u00a0'pps',\n \u00a0 \u00a0'ppsm',\n \u00a0 \u00a0'ppsx',\n \u00a0 \u00a0'ppt',\n \u00a0 \u00a0'pptm',\n \u00a0 \u00a0'pptx',\n  ];\n \u00a0if (fileTypesDoc.includes(fileType)) {\n \u00a0 \u00a0docType = 'text';\n  }\n \u00a0if (fileTypesCsv.includes(fileType)) {\n \u00a0 \u00a0docType = 'spreadsheet';\n  }\n \u00a0if (fileTypesPPt.includes(fileType)) {\n \u00a0 \u00a0docType = 'presentation';\n  }\n \u00a0return docType;\n}<\/code><\/pre>\n\n\n\n<p>4.\u521b\u5efaonlyOffice\u7ec4\u4ef6<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template>\n \u00a0&lt;div class=\"qualityManual-container\">\n \u00a0 \u00a0&lt;div class=\"qualityManual-container-office\">\n \u00a0 \u00a0 \u00a0&lt;div id=\"onlyOfficeEl\">&lt;\/div>\n \u00a0 \u00a0&lt;\/div>\n \u00a0&lt;\/div>\n&lt;\/template>\n\u200b\n&lt;script lang=\"ts\" setup>\n \u00a0import { ref, watch, onUnmounted } from 'vue';\n \u00a0\/\/\u516c\u7528\u6587\u4ef6\u7c7b\u578b\n \u00a0import { getFileType } from '.\/onlyOffice\/office';\n \u00a0\/\/\u516c\u7528\u914d\u7f6e\u9879\n \u00a0import { getFile as getFileOption } from '.\/onlyOffice\/option';\n\u200b\n \u00a0type Props = {\n \u00a0 \u00a0fileId: string;\/\/\u4f20\u5165\u6587\u4ef6id\n    fileType: string;\/\/\u4f20\u5165\u63a5\u53e3\u5730\u5740\n    view: string;\n  };\n\u200b\n \u00a0const props = defineProps&lt;Props>();\n\u200b\n \u00a0const option = ref({});\/\/\u914d\u7f6e\u9879\n \u00a0const doctype = ref('');\/\/\u6587\u4ef6\u7c7b\u578b\n \u00a0const docEditor = ref();\/\/\u6587\u6863\u793a\u4f8b\n\u200b\n \u00a0\/\/\u83b7\u53d6\u516c\u7528\u914d\u7f6e\u9879,\u5e76\u5b9e\u4f8b\u5316onlyoffice\n \u00a0const getFile = () => {\n \u00a0 \u00a0let tempOption = getFileOption(props.fileType, props.fileId);\n \u00a0 \u00a0option.value = {\n \u00a0 \u00a0 \u00a0...tempOption,\n \u00a0  };\n \u00a0 \u00a0setTimeout(() => {\n \u00a0 \u00a0 \u00a0setEditor(option.value);\n \u00a0  }, 500);\n  };\n\u200b\n \u00a0\/\/\u5b9e\u4f8b\u5316onlyoffice\n \u00a0const setEditor = (option) => {\n \u00a0 \u00a0if (docEditor.value) {\n \u00a0 \u00a0 \u00a0docEditor.value.destroyEditor();\n \u00a0 \u00a0 \u00a0docEditor.value = null;\n \u00a0  }\n\u200b\n \u00a0 \u00a0\/\/\u83b7\u53d6\u6587\u4ef6\u7c7b\u578b\n \u00a0 \u00a0doctype.value = getFileType(option.fileType);\n\u200b\n \u00a0 \u00a0\/\/\u5b9a\u5236\u5316onlyoffice\u914d\u7f6e\n \u00a0 \u00a0let config = {\n \u00a0 \u00a0 \u00a0document: {\n \u00a0 \u00a0 \u00a0 \u00a0\/\/\u540e\u7f00\n \u00a0 \u00a0 \u00a0 \u00a0fileType: option.fileType,\n \u00a0 \u00a0 \u00a0 \u00a0key: option.key,\n \u00a0 \u00a0 \u00a0 \u00a0\/\/ key: option.key || '',\n \u00a0 \u00a0 \u00a0 \u00a0title: option.title,\n \u00a0 \u00a0 \u00a0 \u00a0permissions: {\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0edit: props.view ? false : option.isEdit, \/\/\u662f\u5426\u53ef\u4ee5\u7f16\u8f91: \u53ea\u80fd\u67e5\u770b\uff0c\u4f20false\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0print: option.isPrint,\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0download: true,\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ \"fillForms\": true,\/\/\u662f\u5426\u53ef\u4ee5\u586b\u5199\u8868\u683c\uff0c\u5982\u679c\u5c06mode\u53c2\u6570\u8bbe\u7f6e\u4e3aedit\uff0c\u5219\u586b\u5199\u8868\u5355\u4ec5\u5bf9\u6587\u6863\u7f16\u8f91\u5668\u53ef\u7528\u3002 \u9ed8\u8ba4\u503c\u4e0eedit\u6216review\u53c2\u6570\u7684\u503c\u4e00\u81f4\u3002\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ \"review\": true \/\/\u8ddf\u8e2a\u53d8\u5316\n \u00a0 \u00a0 \u00a0  },\n \u00a0 \u00a0 \u00a0 \u00a0url: option.url,\n \u00a0 \u00a0  },\n \u00a0 \u00a0 \u00a0documentType: doctype.value,\n \u00a0 \u00a0 \u00a0editorConfig: {\n \u00a0 \u00a0 \u00a0 \u00a0callbackUrl: option.editUrl, \/\/\"\u7f16\u8f91word\u540e\u4fdd\u5b58\u65f6\u56de\u8c03\u7684\u5730\u5740\uff0c\u8fd9\u4e2aapi\u9700\u8981\u81ea\u5df1\u5199\u4e86\uff0c\u5c06\u7f16\u8f91\u540e\u7684\u6587\u4ef6\u901a\u8fc7\u8fd9\u4e2aapi\u4fdd\u5b58\u5230\u81ea\u5df1\u60f3\u8981\u7684\u4f4d\u7f6e\n \u00a0 \u00a0 \u00a0 \u00a0lang: option.lang, \/\/\u8bed\u8a00\u8bbe\u7f6e\n \u00a0 \u00a0 \u00a0 \u00a0\/\/\u5b9a\u5236\n \u00a0 \u00a0 \u00a0 \u00a0customization: {\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0forcesave: true,\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0autosave: true, \/\/\u662f\u5426\u81ea\u52a8\u4fdd\u5b58\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0chat: false,\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0comments: false,\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0help: false,\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/ \"hideRightMenu\": false,\/\/\u5b9a\u4e49\u5728\u7b2c\u4e00\u6b21\u52a0\u8f7d\u65f6\u662f\u663e\u793a\u8fd8\u662f\u9690\u85cf\u53f3\u4fa7\u83dc\u5355\u3002 \u9ed8\u8ba4\u503c\u4e3afalse\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\/\/\u662f\u5426\u663e\u793a\u63d2\u4ef6\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0plugins: false,\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0spellcheck: false,\n \u00a0 \u00a0 \u00a0  },\n \u00a0 \u00a0 \u00a0 \u00a0user: {\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0id: option.user.id,\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0name: option.user.name,\n \u00a0 \u00a0 \u00a0  },\n \u00a0 \u00a0 \u00a0 \u00a0mode: option.model ? option.model : 'edit',\n \u00a0 \u00a0  },\n \u00a0 \u00a0 \u00a0width: '100%',\n \u00a0 \u00a0 \u00a0height: '100%',\n \u00a0 \u00a0 \u00a0token: option.token || '',\n \u00a0  };\n \u00a0 \u00a0console.log(config);\n \u00a0 \u00a0\/\/\u521b\u5efadoc\u5b9e\u4f8b\n \u00a0 \u00a0docEditor.value = new DocsAPI.DocEditor('onlyOfficeEl', config);\n  };\n\u200b\n \u00a0\/\/\u9500\u6bc1\u793a\u4f8b\n \u00a0onUnmounted(() => {\n \u00a0 \u00a0if (docEditor.value !== null) {\n \u00a0 \u00a0 \u00a0docEditor.value.destroyEditor();\n \u00a0 \u00a0 \u00a0docEditor.value = null;\n \u00a0  }\n  });\n\u200b\n \u00a0watch(\n \u00a0  () => props.fileId,\/\/\u5f53\u4f20\u5165\u6587\u4ef6id\u53d8\u66f4\u65f6\u91cd\u65b0\u5b9e\u4f8b\u5316\u7ec4\u4ef6\n \u00a0  () => {\n \u00a0 \u00a0 \u00a0getFile();\n \u00a0  },\n \u00a0  {\n \u00a0 \u00a0 \u00a0immediate: true,\/\/\u9996\u6b21\u4f20\u53c2\u7acb\u523b\u6267\u884c\n \u00a0  },\n  );\n&lt;\/script>\n&lt;style lang=\"less\" scoped>\n \u00a0.qualityManual-container {\n \u00a0 \u00a0padding: 0 !important;\n \u00a0 \u00a0height: 100%;\n  }\n\u200b\n \u00a0.qualityManual-container-office {\n \u00a0 \u00a0width: 100%;\n \u00a0 \u00a0height: calc(100% - 10px);\n \u00a0 \u00a0user-select: none;\n\u200b\n \u00a0  &amp;::before {\n \u00a0 \u00a0 \u00a0content: '';\n \u00a0 \u00a0 \u00a0position: absolute;\n \u00a0 \u00a0 \u00a0top: 0;\n \u00a0 \u00a0 \u00a0width: 100px;\n \u00a0 \u00a0 \u00a0height: 25px;\n \u00a0 \u00a0 \u00a0user-select: none;\n \u00a0  }\n  }\n&lt;\/style><\/code><\/pre>\n\n\n\n<p>5.\u5f15\u7528onlyoffice\u7ec4\u4ef6<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/\u7ec4\u4ef6\u4f20\u53c2\u6839\u636e\u5b9e\u9645\u9879\u76ee\u914d\u7f6e\n&lt;TheOnlyOffice\n \u00a0:fileId=\"route.query.id\"\n \u00a0:fileType=\"route.query.fileType\"\n \u00a0:view=\"route.query.view\"\n\/><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>1.\u5728index.html\u6587\u4ef6\u4e2d\u4f7f\u7528script\u5f15\u5165\u540e\u7aef\u670d\u52a1\u90e8\u7f72\u540e\u751f\u6210\u7684onlyOffice js\u6587\u4ef6 2.\u521b [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[8],"class_list":["post-35","post","type-post","status-publish","format-standard","hentry","category-vue","tag-vue"],"_links":{"self":[{"href":"https:\/\/blog.kwitsukasa.top\/index.php?rest_route=\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kwitsukasa.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kwitsukasa.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kwitsukasa.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kwitsukasa.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":1,"href":"https:\/\/blog.kwitsukasa.top\/index.php?rest_route=\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/blog.kwitsukasa.top\/index.php?rest_route=\/wp\/v2\/posts\/35\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/blog.kwitsukasa.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kwitsukasa.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kwitsukasa.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}