From 44d615df2c851a86d75db9097161c61671496a11 Mon Sep 17 00:00:00 2001 From: jmal Date: Mon, 15 Aug 2022 18:39:50 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=E6=96=B0=E5=A2=9Epdf=E9=A2=84?= =?UTF-8?q?=E8=A7=88=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ShowFile/ShowFile.vue | 3 +- src/components/office/OnlyOfficeEditor.vue | 10 +-- src/components/office/PdfPreview.vue | 74 ++++++++++++++++++++++ src/components/preview/OfficePreview.vue | 50 +++++++++++---- 4 files changed, 119 insertions(+), 18 deletions(-) create mode 100644 src/components/office/PdfPreview.vue diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index 7b033e3..c5da901 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -3156,7 +3156,7 @@ export default { this.openCompressionVisible = true return } - if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv') { + if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv' || row.suffix === 'pdf') { // office文件 this.officePreviewVisible = true this.officePreviewRow = row @@ -3165,7 +3165,6 @@ export default { if (row.suffix === 'pdf') { // pdf文件 fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token) - this.closeNotPreviewDialogVisible() return } this.notPreviewDialogVisible = true diff --git a/src/components/office/OnlyOfficeEditor.vue b/src/components/office/OnlyOfficeEditor.vue index 8fa7b90..b9cf42e 100644 --- a/src/components/office/OnlyOfficeEditor.vue +++ b/src/components/office/OnlyOfficeEditor.vue @@ -21,6 +21,10 @@ export default { return "office_" + Math.round(Math.random() * 10000) } }, + fileUrl: { + type: String, + default: '' + }, code: { type: String, default: '' @@ -111,17 +115,13 @@ export default { } let fileKey = `${new Date(this.file.updateDate).getTime()}-${this.file.id}` - let url = window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token) - if(this.readOnly){ - url = window.location.origin + fileConfig.publicPreviewUrl(this.file.id, window.shareId); - } let callbackUrl = fileConfig.officeCallBackUrl(this.$store.getters.token, this.file.id) const config = { "document": { "fileType": this.fileType, "key": fileKey, "title": this.file.name, - "url": url, + "url": this.fileUrl, }, "editorConfig": { "mode": "edit", diff --git a/src/components/office/PdfPreview.vue b/src/components/office/PdfPreview.vue new file mode 100644 index 0000000..3e9e6c3 --- /dev/null +++ b/src/components/office/PdfPreview.vue @@ -0,0 +1,74 @@ + + + + diff --git a/src/components/preview/OfficePreview.vue b/src/components/preview/OfficePreview.vue index be82def..2df326b 100644 --- a/src/components/preview/OfficePreview.vue +++ b/src/components/preview/OfficePreview.vue @@ -16,7 +16,8 @@
- + +
@@ -28,10 +29,12 @@ import OnlyOfficeEditor from "@/components/office/OnlyOfficeEditor"; import MessageDialog from "@/components/message/MessageDialog"; import Bus from "@/assets/js/bus"; +import fileConfig from "@/utils/file-config"; +import PdfPreview from "@/components/office/PdfPreview"; export default { name: 'OfficePreview', - components: {MessageDialog, OnlyOfficeEditor}, + components: {PdfPreview, MessageDialog, OnlyOfficeEditor}, props: { id: { type: String, @@ -56,6 +59,7 @@ export default { }, data() { return { + fileUrl: '', pc: this.$pc, show: this.status, readyShow: false, @@ -63,8 +67,14 @@ export default { isSaveDialogVisible: false, saved: true, previewDocument: {}, + delayClosing: {} } }, + computed: { + fileType() { + return this.getType(this.file.suffix) + }, + }, watch: { status: function(visible){ if(visible){ @@ -73,9 +83,12 @@ export default { this.previewDocument = document.querySelector('.preview-block') }) this.checkReadOnly(this.file.userId) + if (this.file.suffix === 'pdf') { + this.readyShow = true + } // 3秒后还没加载出来视为加载失败 let that = this - setTimeout(function () { + this.delayClosing = setTimeout(function () { if (!that.readyShow) { that.readyShow = true Bus.$emit('loadFileFaild') @@ -85,6 +98,14 @@ export default { } }, methods: { + getType(suffix) { + switch (suffix) { + case 'pdf': + return 'pdf' + default: + return 'office' + } + }, /** * 点击关闭按钮 */ @@ -99,6 +120,7 @@ export default { * 执行关闭预览窗口 */ close() { + clearTimeout(this.delayClosing) this.show = false this.readyShow = false this.$emit('update:status', false) @@ -108,14 +130,16 @@ export default { */ onReady() { this.saved = true - this.previewDocument.style.zIndex = 9999 - this.readyShow = true - this.$nextTick(() => { - let that = this - setTimeout(function () { - that.previewDocument.style.zIndex = 2001 - },200) - }) + if (this.fileType === 'office') { + this.previewDocument.style.zIndex = 9999 + this.readyShow = true + this.$nextTick(() => { + let that = this + setTimeout(function () { + that.previewDocument.style.zIndex = 2001 + },200) + }) + } }, /** * 编辑回调 @@ -171,6 +195,10 @@ export default { closeBar.style.transform = 'rotate(225deg)' }) } + this.fileUrl = window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token) + if(this.readOnly){ + this.fileUrl = window.location.origin + fileConfig.publicPreviewUrl(this.file.id, window.shareId); + } }, } }