优化OnlyOffice文档加载逻辑,移除重复脚本加载检查,新增获取URL参数的功能,调整文档ID生成方式,确保用户ID唯一性。

This commit is contained in:
Phoenix 2025-05-21 13:27:33 +08:00
parent 579fed2e69
commit 91107e2f85

View File

@ -3,18 +3,13 @@
</template> </template>
<script setup> <script setup>
import { onMounted } from 'vue' import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute() const placeholderRef = ref(null)
// OnlyOffice API // OnlyOffice API
function loadScript(src) { function loadScript(src) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (document.querySelector(`script[src="${src}"]`)) {
resolve()
return
}
const script = document.createElement('script') const script = document.createElement('script')
script.type = 'text/javascript' script.type = 'text/javascript'
script.src = src script.src = src
@ -24,6 +19,14 @@ function loadScript(src) {
}) })
} }
// URL
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)')
const results = regex.exec(window.location.search)
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '))
}
// //
function getDocumentTypes(url) { function getDocumentTypes(url) {
const extension = url.split('.').pop().toLowerCase() const extension = url.split('.').pop().toLowerCase()
@ -39,20 +42,16 @@ function getDocumentTypes(url) {
return types[extension] || { fileType: 'docx', documentType: 'word' } return types[extension] || { fileType: 'docx', documentType: 'word' }
} }
// CSP meta onMounted(async () => {
function insertCSPMeta() { // Content-Security-Policy meta
if (!document.querySelector('meta[http-equiv="Content-Security-Policy"]')) { if (!document.querySelector('meta[http-equiv="Content-Security-Policy"]')) {
const meta = document.createElement('meta') const meta = document.createElement('meta')
meta.httpEquiv = 'Content-Security-Policy' meta.httpEquiv = 'Content-Security-Policy'
meta.content = 'upgrade-insecure-requests' meta.content = 'upgrade-insecure-requests'
document.head.appendChild(meta) document.head.appendChild(meta)
} }
}
onMounted(async () => {
insertCSPMeta()
await loadScript('https://onlyoffice.fontree.cn/web-apps/apps/api/documents/api.js') await loadScript('https://onlyoffice.fontree.cn/web-apps/apps/api/documents/api.js')
const url = route.query.url const url = getUrlParameter('url')
if (!url) { if (!url) {
alert('请提供文档 URL 参数') alert('请提供文档 URL 参数')
return return
@ -63,7 +62,7 @@ onMounted(async () => {
new window.DocsAPI.DocEditor('office-div', { new window.DocsAPI.DocEditor('office-div', {
document: { document: {
fileType, fileType,
key: `doc_${fileName}_${Date.now()}`, key: 'doc_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
title: fileName, title: fileName,
url url
}, },
@ -72,7 +71,7 @@ onMounted(async () => {
mode: 'view', mode: 'view',
lang: 'zh-CN', lang: 'zh-CN',
user: { user: {
id: 'user_' + Date.now(), id: 'user_' + new Date().getTime(),
name: '访客用户' name: '访客用户'
}, },
customization: { customization: {