100 lines
2.6 KiB
Vue
100 lines
2.6 KiB
Vue
<template>
|
|
<div id="office-div" ></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
|
|
// 动态加载 OnlyOffice API 脚本（防止重复加载）
|
|
function loadScript(src) {
|
|
return new Promise((resolve, reject) => {
|
|
if (document.querySelector(`script[src="${src}"]`)) {
|
|
resolve()
|
|
return
|
|
}
|
|
const script = document.createElement('script')
|
|
script.type = 'text/javascript'
|
|
script.src = src
|
|
script.onload = resolve
|
|
script.onerror = reject
|
|
document.head.appendChild(script)
|
|
})
|
|
}
|
|
|
|
// 判断文件类型
|
|
function getDocumentTypes(url) {
|
|
const extension = url.split('.').pop().toLowerCase()
|
|
const types = {
|
|
'docx': { fileType: 'docx', documentType: 'word' },
|
|
'doc': { fileType: 'doc', documentType: 'word' },
|
|
'xlsx': { fileType: 'xlsx', documentType: 'cell' },
|
|
'xls': { fileType: 'xls', documentType: 'cell' },
|
|
'pptx': { fileType: 'pptx', documentType: 'slide' },
|
|
'ppt': { fileType: 'ppt', documentType: 'slide' },
|
|
'pdf': { fileType: 'pdf', documentType: 'word' }
|
|
}
|
|
return types[extension] || { fileType: 'docx', documentType: 'word' }
|
|
}
|
|
|
|
// 动态插入 CSP meta
|
|
function insertCSPMeta() {
|
|
if (!document.querySelector('meta[http-equiv="Content-Security-Policy"]')) {
|
|
const meta = document.createElement('meta')
|
|
meta.httpEquiv = 'Content-Security-Policy'
|
|
meta.content = 'upgrade-insecure-requests'
|
|
document.head.appendChild(meta)
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
insertCSPMeta()
|
|
await loadScript('https://onlyoffice.fontree.cn/web-apps/apps/api/documents/api.js')
|
|
const url = route.query.url
|
|
if (!url) {
|
|
alert('请提供文档 URL 参数')
|
|
return
|
|
}
|
|
const fileName = url.split('/').pop()
|
|
const { fileType, documentType } = getDocumentTypes(url)
|
|
// eslint-disable-next-line no-undef
|
|
new window.DocsAPI.DocEditor('office-div', {
|
|
document: {
|
|
fileType,
|
|
key: `doc_${fileName}_${Date.now()}`,
|
|
title: fileName,
|
|
url
|
|
},
|
|
documentType,
|
|
editorConfig: {
|
|
mode: 'view',
|
|
lang: 'zh-CN',
|
|
user: {
|
|
id: 'user_' + Date.now(),
|
|
name: '访客用户'
|
|
},
|
|
customization: {
|
|
chat: false,
|
|
commentAuthorOnly: false,
|
|
compactToolbar: true,
|
|
hideRightMenu: false,
|
|
compatibility: true,
|
|
showReviewChanges: false
|
|
}
|
|
}
|
|
})
|
|
})
|
|
</script>
|
|
<style>
|
|
iframe[name="frameEditor"] {
|
|
width: 100% !important;
|
|
height: 100vh !important;
|
|
min-height: 100vh !important;
|
|
border: none !important;
|
|
display: block;
|
|
}
|
|
</style>
|
|
|