<template>
<div id="app" class="onlyoffice-app">
<div id="editor" ref="editor"></div>
</div>
</template>
<script setup>
import { getOnlyOfficeToken } from '@/common/ts/api/wwApi'
import { defineComponent, ref,onMounted,onUnmounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useRoute } from 'vue-router'
const editor = ref(null);
let docEditor = null;
let openUrl = ''
const route = useRoute()
onLoad((options) => {
if (options.openUrl) {
openUrl = decodeURIComponent(options.openUrl);
console.log('接收到的 openUrl:', openUrl);
}
});
// 生命周期钩子
onMounted(() => {
openUrl = decodeURIComponent(route.query.openUrl);
console.log(`🚀 ~ initOnlyOffice ~ config.document.openUrl.split(".").pop():`, openUrl.split(".").pop())
const script = document.createElement('script');
const onlyOfficeUrl = import.meta.env.VITE_ONLY_OFFICE_SERVER;
script.type = 'text/javascript';
script.src = `${onlyOfficeUrl}/web-apps/apps/api/documents/api.js?preload=placeholder`;
script.onload = () => {
if (openUrl) {
loadDocumentFromUrl(openUrl);
// loadDocumentFromUrl('http://dfs.dev.rosino.com:9000/cm-rsri/20250801/d6b3b2cf92e64a81a6f2c8013acafc3c-走访思考总结模板.xlsx');
// loadDocumentFromUrl('https://mzy-outernet-dev.rosino.com/out/file/biz-mit/public/20250806/c9ee802a7ef94ae59a9121dae112eb33.xlsm');
}
};
script.onerror = (err) => {
console.log("🚀 ~ onMounted ~ err:", err)
};
document.head.appendChild(script);
const iframe = document.getElementById('editor').querySelector('iframe');
console.log("🚀 ~ checkIframe ~ iframe:", iframe)
console.log("🚀 ~ checkIframe ~ iframe:", iframe)
console.log("🚀 ~ checkIframe ~ iframe:", iframe)
if (iframe && iframe.contentDocument) {
clearInterval(checkIframe);
const style = iframe.contentDocument.createElement('style');
style.textContent = `
.asc-window, .asc-toolbar, .asc-sidebar, .asc-statusbar {
display: none !important;
}
.asc-editor-container, .asc-inner {
margin: 0 !important;
padding: 0 !important;
}
#toolbar, #sidebar, #statusbar {
display: none !important;
}
`;
iframe.contentDocument.head.appendChild(style);
}
});
const getFileNameFromUrl = (url) => {
return url.substring(url.lastIndexOf("/") + 1);
};
const loadDocumentFromUrl = (fileUrl) => {
if (!fileUrl || !fileUrl.trim()) {
console.log("文件URL不能为空", "error");
return;
}
initOnlyOffice(fileUrl);
};
const initOnlyOffice = async (fileUrl) => {
const fileNameFromUrl = getFileNameFromUrl(fileUrl);
try {
if (docEditor) docEditor.destroyEditor();
} catch (error) {
console.log("error: ", error);
}
let config = {
document: {
title: fileNameFromUrl,
url: fileUrl,
fileType: fileUrl.split(".").pop(),
key: `doc_${Date.now()}_${Math.random()}`,
permissions: {
download: false,
print: false,
comment: false,
copy: false,
modifyFilter: false,
modifyContentControl: false,
edit: false,
review: false,
protectScheme: false,
},
},
editorConfig: {
lang: "zh-CN",
mode: "view",
deviceType: null,
canCoAuthoring: false,
user: {
id: "anonymous",
name: "Anonymous",
},
coEditing: {
mode: "fast",
change: false,
},
permissions: {
download: false,
print: false,
chat: false, // 正确的设置位置
select: false,
copy: false
},
customization: {
about: false,
compactToolbar: true,
help: false,
feedback: false,
goback: false,
comments: false,
select: false,
copy: false
},
},
};
let token = await getToken(config);
config = {
...config,
token: token.data
};
try {
docEditor = new DocsAPI.DocEditor("editor", config);
} catch (error) {
setTimeout(() => {
initOnlyOffice(fileUrl);
}, 1500);
}
};
// 获取token
const getToken = async (data) => {
let result = await getOnlyOfficeToken(encodeURIComponent(JSON.stringify(data)));
return result;
};
onUnmounted(() => {
if (docEditor) {
docEditor.destroyEditor();
}
});
</script>
<style scoped>
#app {
width: 100%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding-right: 0px;
}
#editor {
width: 100%;
height: 100%;
min-height: 50px;
}
#toolbar {
padding: 10px !important;
display: none !important;
}
.onlyoffice-app {
margin-top: -37px !important;
margin-left: -39px !important;
width: calc(100% + 42px) !important;
height: calc(100vh + 37px) !important;
}
.layout-item{
top: 0 !important;
left: -10px;
}
</style>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
height: 100%;
overflow: hidden;
}
</style>获取不到iframe
最新发布
这是一个关于JavaScript中使用`any`类型的示例，展示了一个名为`print`的通用函数，它接受任意数量和类型的参数并通过`console.log`进行打印。此函数体现了JavaScript的灵活性，允许开发者在不明确类型的情况下进行操作。
扫一扫
585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
