| | |
| | | <!--onlyoffice 编辑器--> |
| | | <template> |
| | | <div id="vabOnlyOffice"></div> |
| | | <div class="document-preview"> |
| | | <iframe |
| | | v-if="isPdf" |
| | | :key="option.url" |
| | | :src="option.url" |
| | | class="native-pdf-preview" |
| | | title="PDF预览" |
| | | ></iframe> |
| | | <div v-else id="vabOnlyOffice"></div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | } |
| | | }; |
| | | }, |
| | | computed: { |
| | | isPdf() { |
| | | return this.isPdfFile(this.option); |
| | | } |
| | | }, |
| | | created() { |
| | | if(this.options){ |
| | | const option = this.options |
| | |
| | | }, |
| | | async setEditor(option) { |
| | | this.destroyEditor(); |
| | | // 没有文档地址就不初始化编辑器,避免访问尚未加载的 DocsAPI |
| | | if (!option || !option.url) { |
| | | // PDF 使用浏览器原生预览;其他文档才初始化 OnlyOffice。 |
| | | if (!option || !option.url || this.isPdfFile(option)) { |
| | | return; |
| | | } |
| | | // 等待 v-else 中的 OnlyOffice 容器完成渲染。 |
| | | await this.$nextTick(); |
| | | this.doctype = this.getFileType(option.fileType); |
| | | let config = { |
| | | document: { |
| | |
| | | return; |
| | | } |
| | | this.docEditor = new window.DocsAPI.DocEditor("vabOnlyOffice", config); |
| | | }, |
| | | isPdfFile(option) { |
| | | if (!option) { |
| | | return false; |
| | | } |
| | | const fileType = String(option.fileType || "").toLowerCase(); |
| | | const url = String(option.url || "").split(/[?#]/)[0].toLowerCase(); |
| | | return fileType === "pdf" || url.endsWith(".pdf"); |
| | | }, |
| | | getFileType(fileType) { |
| | | let docType = ""; |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .document-preview, |
| | | .native-pdf-preview, |
| | | #vabOnlyOffice { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | .native-pdf-preview { |
| | | display: block; |
| | | border: 0; |
| | | } |
| | | html, |
| | | body { |
| | | height: 100%; |