1. 服务器安装OnlyOffice ~~ 找后台或运维
2. OfficePreview.vue

<template><div id="officePreview"></div>
</template><script setup>
import { onMounted } from "vue";const props = defineProps({previewUrl: {type: String,default: "",},previewName: {type: String,default: "文件名字",},
});const getInfo = (url, name) => {var decodedUrl = decodeURIComponent(url);var path = new URL(decodedUrl).pathname;var filename = name || path.split("/").pop();var fileExtension = filename.split(".").pop();var documentType;var paths = path.split("/");var key = paths[paths.length - 2]; // key唯一，由字母数字组成。if (["djvu","doc","docm","docx","docxf","dot","dotm","dotx","epub","fb2","fodt","htm","html","mht","mhtml","odt","oform","ott","oxps","pdf","rtf","stw","sxw","txt","wps","wpt","xml","xps",].includes(fileExtension.toLowerCase())) {documentType = "word";} else if (["csv","et","ett","fods","ods","ots","sxc","xls","xlsb","xlsm","xlsx","xlt","xltm","xltx","xml",].includes(fileExtension.toLowerCase())) {documentType = "cell";} else if (["dps","dpt","fodp","odp","otp","pot","potm","potx","pps","ppsm","ppsx","ppt","pptm","pptx","sxi",].includes(fileExtension.toLowerCase())) {documentType = "slide";} else {documentType = "unknown";}return {filename: filename,fileExtension: fileExtension,documentType: documentType,key: key,};
};const сonnectEditor = () => {console.log("0000123", props.previewUrl);const { filename, fileExtension, documentType, key } = getInfo(props.previewUrl,props.previewName);var config = {document: {fileType: fileExtension,key: key,title: props.previewName || filename,url: props.previewUrl,},documentType: documentType,editorConfig: {mode: "view",},height: "100%",width: "100%",};console.log(config);// eslint-disable-next-linenew DocsAPI.DocEditor("officePreview", config);
};onMounted(() => {if (typeof DocsAPI === "undefined") {const script = document.createElement("script");script.src =process.env.VUE_APP_ONLYOFFICE_DOCUMENTSERVER +"/web-apps/apps/api/documents/api.js";script.async = true;script.addEventListener("load", сonnectEditor);document.head.appendChild(script);} else {сonnectEditor();}
});
</script>

4. 定义process.env.VUE_APP_ONLYOFFICE_DOCUMENTSERVER

// .env.dev
VUE_APP_FILE_PATH = 'http://192.168.3.208/doc-info'
VUE_APP_ONLYOFFICE_DOCUMENTSERVER = 'http://192.168.3.208:7073'

5. 路由

{path: "office-preview",name: "office-preview",component: () => import("@/components/office-preview/index.vue"),
},

6. 预览函数

import router from "@/router";// 预览文件
export const handlePreview = (file) => {if (!file) {return;}const name = file.documentName;const url = (process.env.VUE_APP_FILE_PATH || "") + file.documentUrl;if (!name || !url || !router) return;const lowerCaseName = name.toLowerCase();const suffixName = "." + lowerCaseName.split(".").pop();// 1. 处理文本和文档类型if ([".txt", ".doc", ".docx", ".pdf"].includes(suffixName)) {let routeUrl = router.resolve({name: "office-preview",query: { url, name },});window.open(routeUrl.href, "_blank");return;}// 2. 处理图片和视频类型if ([".png", ".jpg", ".jpeg", ".bmp", ".gif", ".mp4", ".mov"].includes(suffixName)) {window.open(url, "_blank");return;}// 3. 提示不支持的文件类型ElMessage({message: "暂不支持该格式文件预览",type: "warning",});
};

7. 调试经验
   a. http://192.168.3.205:7073/web-apps/apps/api/documents/api.js 是否能正常访问
   b. http://192.168.3.205:7073 是否能正常上传预览文件
   c. 嵌入后，报这个错表示跨域，请找对应人：Access to fetch at 'http://192.168.3.205:7073/web-apps/apps/api/documents/api.js' from origin 'http://192.168.3.208' has been blocked by CORS policy
   d. 检查文件key是否唯一且为纯字母数字格式。否则导致预览出不来。