服务器安装OnlyOffice ~~ 找后台或运维 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 ] ; 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) ; new 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>
定义process.env.VUE_APP_ONLYOFFICE_DOCUMENTSERVER
VUE_APP_FILE_PATH = 'http://192.168.3.208/doc-info'
VUE_APP_ONLYOFFICE_DOCUMENTSERVER = 'http://192.168.3.208:7073'
路由
{ path: "office-preview" , name: "office-preview" , component : ( ) => import ( "@/components/office-preview/index.vue" ) ,
} ,
预览函数
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 ( ) ; if ( [ ".txt" , ".doc" , ".docx" , ".pdf" ] . includes ( suffixName) ) { let routeUrl = router. resolve ( { name: "office-preview" , query: { url, name } , } ) ; window. open ( routeUrl. href, "_blank" ) ; return ; } if ( [ ".png" , ".jpg" , ".jpeg" , ".bmp" , ".gif" , ".mp4" , ".mov" ] . includes ( suffixName) ) { window. open ( url, "_blank" ) ; return ; } ElMessage ( { message: "暂不支持该格式文件预览" , type: "warning" , } ) ;
} ;
调试经验 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是否唯一且为纯字母数字格式。否则导致预览出不来。