From 5a6c41afe67adf4fede5114e1305a18ebfccf1aa Mon Sep 17 00:00:00 2001 From: jmal Date: Thu, 20 Jun 2024 18:21:12 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0iframe=E9=A2=84?= =?UTF-8?q?=E8=A7=88=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ShowFile/ShowFile.vue | 62 +++++-- src/components/office/OnlyOfficeEditor.vue | 16 +- .../preview/IframeContentPreview.vue | 169 ++++++++++++++++++ .../{OfficePreview.vue => IframePreview.vue} | 24 ++- src/styles/home-index.scss | 2 +- src/views/home/mobile/index.vue | 6 +- src/views/public/share/shareList.vue | 6 +- 7 files changed, 253 insertions(+), 32 deletions(-) create mode 100644 src/components/preview/IframeContentPreview.vue rename src/components/preview/{OfficePreview.vue => IframePreview.vue} (88%) diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index 8472341..7d8d184 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -658,10 +658,11 @@ :file="videoPreviewRow" :status.sync="videoPreviewVisible" > - + @@ -835,7 +836,7 @@ import '@/utils/directives.js' import fileConfig from '@/utils/file-config' import EditElement from '@/views/markdown/EditElement' -import OfficePreview from '@/components/preview/OfficePreview' +import IframePreview from '@/components/preview/IframePreview.vue' import ShareDialog from '@/components/ShareDialog/index.vue' import Clipboard from 'clipboard' import TagDialog from '@/components/TagDialog/index.vue' @@ -847,7 +848,7 @@ export default { FileDetails, TagDialog, ShareDialog, - OfficePreview, + IframePreview, EditElement, MessageDialog, AudioPreview, @@ -1107,9 +1108,21 @@ export default { imagePreviewVisible: false, videoPreviewRow: {}, videoPreviewVisible: false, - officePreviewRow: {}, - officePreviewVisible: false, + iframePreviewRow: {}, + fileHandler: {}, + iframePreviewVisible: false, audioPreviewRow: {}, + fileHandlers: { + "pdf": { + "PDF.js": "https://alist-org.github.io/pdf.js/web/viewer.html?file=$e_url", + }, + "epub": { + "EPUB.js": "https://alist-org.github.io/static/epub.js/viewer.html?url=$e_url", + }, + "dwg": { + "kkPreview": "http://192.168.0.233:8012/onlinePreview?url=$eb_url", + } + }, audioPreviewVisible: false, drawer: false, rowStyleExecuting: false, @@ -2519,8 +2532,8 @@ export default { case 'docx': case 'xlsx': case 'pptx': - this.officePreviewRow = res.data - this.officePreviewVisible = true + this.iframePreviewRow = res.data + this.iframePreviewVisible = true break } const that = this @@ -4234,6 +4247,14 @@ export default { this.$emit('selectedFile', selectFile) return } + const fileHandler = this.hasIframePreview(row.suffix, this.fileHandlers) + if (fileHandler !== null) { + // iframe 预览 + this.iframePreviewVisible = true + this.iframePreviewRow = row + this.fileHandler = {} + return + } if (row.contentType.startsWith('image')) { // 图片 this.imagePreviewVisible = true @@ -4265,13 +4286,11 @@ export default { this.openCompressionVisible = true return } - if ( - row.contentType.indexOf('office') > -1 || - ['pdf', 'csv', 'drawio', 'mind', 'glb', 'gltf', 'glTF'].includes(row.suffix) - ) { - // office文件 - this.officePreviewVisible = true - this.officePreviewRow = row + if (row.contentType.indexOf('office') > -1 || ['pdf', 'csv', 'drawio', 'mind', 'glb', 'gltf'].includes(row.suffix)) { + // iframe 预览 + this.iframePreviewVisible = true + this.iframePreviewRow = row + this.fileHandler = {} return } if (row.contentType.indexOf('utf-8') > -1) { @@ -4283,6 +4302,15 @@ export default { this.notPreviewDialogVisible = true } }, + hasIframePreview(suffix, fileHandlers) { + for (let key in fileHandlers) { + const extensions = key.split(',') + if (extensions.includes(suffix)) { + return fileHandlers[key] + } + } + return null + }, determineDownload(file) { this.download(file) this.notPreviewDialogVisible = false diff --git a/src/components/office/OnlyOfficeEditor.vue b/src/components/office/OnlyOfficeEditor.vue index 59f0a3e..8e38057 100644 --- a/src/components/office/OnlyOfficeEditor.vue +++ b/src/components/office/OnlyOfficeEditor.vue @@ -103,10 +103,18 @@ export default { if (!id) { return } - settingApi.getOfficeConfig().then(res => { - this.officeServerConfig = res.data - this.loadOfficeApi() - }) + + if (window.shareId) { + settingApi.getPublicOfficeConfig({shareId: window.shareId, shareToken: this.$store.getters.shareToken}).then(res => { + this.officeServerConfig = res.data + this.loadOfficeApi() + }) + } else { + settingApi.getOfficeConfig().then(res => { + this.officeServerConfig = res.data + this.loadOfficeApi() + }) + } }, immediate: true, }, diff --git a/src/components/preview/IframeContentPreview.vue b/src/components/preview/IframeContentPreview.vue new file mode 100644 index 0000000..11f01ef --- /dev/null +++ b/src/components/preview/IframeContentPreview.vue @@ -0,0 +1,169 @@ + + + + diff --git a/src/components/preview/OfficePreview.vue b/src/components/preview/IframePreview.vue similarity index 88% rename from src/components/preview/OfficePreview.vue rename to src/components/preview/IframePreview.vue index 4110bbd..1ae816c 100644 --- a/src/components/preview/OfficePreview.vue +++ b/src/components/preview/IframePreview.vue @@ -16,11 +16,13 @@
+
{{fileType}}
- + +
@@ -32,14 +34,15 @@ import ModelPreview from '@/components/office/ModelPreview.vue' import OnlyOfficeEditor from "@/components/office/OnlyOfficeEditor"; import MessageDialog from "@/components/message/MessageDialog"; +import IframeContentPreview from '@/components/preview/IframeContentPreview.vue' import fileConfig from "@/utils/file-config"; import PdfPreview from "@/components/office/PdfPreview"; import Drawio from "@/components/office/Drawio"; import MyMindEditor from "@/components/Minder/minder" export default { - name: 'OfficePreview', - components: { ModelPreview, Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor, MyMindEditor}, + name: 'IframePreview', + components: { IframeContentPreview, ModelPreview, Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor, MyMindEditor}, props: { id: { type: String, @@ -53,6 +56,10 @@ export default { return {} } }, + fileHandler: { + type: Object, + default: undefined + }, shareId: { type: String, default: undefined @@ -120,6 +127,12 @@ export default { } }, getType(suffix) { + if (this.fileHandler.length > 0) { + return 'other' + } + if (this.file.contentType.indexOf('office') > -1) { + return 'office' + } switch (suffix) { case 'drawio': return 'drawio' @@ -130,8 +143,11 @@ export default { case 'gltf': case 'glb': return 'glTF/GLB' - default: + case 'office': + case 'csv': return 'office' + default: + return 'other' } }, /** diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss index feee703..5841c3b 100644 --- a/src/styles/home-index.scss +++ b/src/styles/home-index.scss @@ -285,7 +285,7 @@ } >>> .van-grid { - padding: 0; + padding-left: 10px; } >>> .van-grid-item__content .svg-icon{ diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue index 901c751..3bb70b8 100644 --- a/src/views/home/mobile/index.vue +++ b/src/views/home/mobile/index.vue @@ -268,7 +268,7 @@ - + + + + + + + + + +
+ + + + + + + diff --git a/src/api/setting-api.js b/src/api/setting-api.js index a5c05b5..05f3991 100644 --- a/src/api/setting-api.js +++ b/src/api/setting-api.js @@ -1,6 +1,20 @@ import request from '@/utils/request' export default { + getPreviewConfig(params) { + return request({ + url: '/cloud/setting/preview/config', + method: 'get', + params + }) + }, + updatePreviewConfig(data) { + return request({ + url: '/cloud/setting/preview/config', + method: 'put', + data + }) + }, getTranscodeConfig(params) { return request({ url: '/cloud/setting/transcode/config', diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index 7d8d184..e6b01ba 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -1112,17 +1112,6 @@ export default { fileHandler: {}, iframePreviewVisible: false, audioPreviewRow: {}, - fileHandlers: { - "pdf": { - "PDF.js": "https://alist-org.github.io/pdf.js/web/viewer.html?file=$e_url", - }, - "epub": { - "EPUB.js": "https://alist-org.github.io/static/epub.js/viewer.html?url=$e_url", - }, - "dwg": { - "kkPreview": "http://192.168.0.233:8012/onlinePreview?url=$eb_url", - } - }, audioPreviewVisible: false, drawer: false, rowStyleExecuting: false, @@ -4247,12 +4236,12 @@ export default { this.$emit('selectedFile', selectFile) return } - const fileHandler = this.hasIframePreview(row.suffix, this.fileHandlers) + const fileHandler = this.hasIframePreview(row.suffix, this.$store.getters.iframePreviewConfig) if (fileHandler !== null) { // iframe 预览 this.iframePreviewVisible = true this.iframePreviewRow = row - this.fileHandler = {} + this.fileHandler = fileHandler return } if (row.contentType.startsWith('image')) { diff --git a/src/components/preview/IframeContentPreview.vue b/src/components/preview/IframeContentPreview.vue index 11f01ef..9aa5a16 100644 --- a/src/components/preview/IframeContentPreview.vue +++ b/src/components/preview/IframeContentPreview.vue @@ -18,7 +18,7 @@
- +
@@ -55,7 +55,6 @@ export default { methods: { iframeLoad() { if (this.fileHandler) { - console.log('this.fileHandler', this.fileHandler); for (let service in this.fileHandler) { const urlTemplate = this.fileHandler[service] if (!urlTemplate) { @@ -70,7 +69,6 @@ export default { this.url = urlTemplate.replace('$eb_url', encodeURIComponent(this.base64EncodeUnicode(url))) this.services.push({label: service, value: this.url}) } - console.log('services', this.services) } } else { this.url = undefined @@ -112,6 +110,7 @@ export default { From 9cf0376c4beb6ada7e56dfbd0b585bb2f0e63257 Mon Sep 17 00:00:00 2001 From: jmal Date: Sat, 22 Jun 2024 18:28:02 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=E5=9F=BA=E7=A1=80=E9=95=9C?= =?UTF-8?q?=E5=83=8F=E4=B8=AD=E6=B7=BB=E5=8A=A0pdf.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docker/nginx-drawio/Dockerfile | 8 +++++++- docker/nginx-drawio/pdfjs.conf | 5 +++++ nginx.conf | 18 ++++++++++++++++++ 3 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 docker/nginx-drawio/pdfjs.conf diff --git a/docker/nginx-drawio/Dockerfile b/docker/nginx-drawio/Dockerfile index 8a89592..a99b1a5 100644 --- a/docker/nginx-drawio/Dockerfile +++ b/docker/nginx-drawio/Dockerfile @@ -6,12 +6,18 @@ RUN mkdir -p /etc/nginx/servers /var/www RUN wget https://github.com/jgraph/drawio/releases/download/v24.4.10/draw.war -O /var/www/draw.war +RUN wget https://github.com/mozilla/pdf.js/releases/download/v4.3.136/pdfjs-4.3.136-dist.zip -O /var/www/pdfjs.zip + RUN unzip /var/www/draw.war -d /var/www/draw -RUN rm -rf /var/www/draw.war /var/www/draw/META-INF /var/www/draw/WEB-INF +RUN unzip /var/www/pdfjs.zip -d /var/www/pdfjs + +RUN rm -rf /var/www/pdfjs.zip /var/www/draw.war /var/www/draw/META-INF /var/www/draw/WEB-INF RUN apt-get remove -y unzip wget && \ apt-get autoremove -y && \ apt-get clean COPY docker/nginx-drawio/drawio.conf /etc/nginx/servers/drawio.conf + +COPY docker/nginx-drawio/pdfjs.conf /etc/nginx/servers/pdfjs.conf diff --git a/docker/nginx-drawio/pdfjs.conf b/docker/nginx-drawio/pdfjs.conf new file mode 100644 index 0000000..f20d08f --- /dev/null +++ b/docker/nginx-drawio/pdfjs.conf @@ -0,0 +1,5 @@ +server { + listen 8081; + server_name localhost; + root /var/www/pdfjs; +} diff --git a/nginx.conf b/nginx.conf index c792359..666defb 100644 --- a/nginx.conf +++ b/nginx.conf @@ -195,6 +195,24 @@ http { proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; } + + location /pdf.js/ { + proxy_pass http://localhost:8081/; + proxy_http_version 1.1; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Real-PORT $remote_port; + proxy_set_header X-Forwarded-Host $the_host//pdf.js; + proxy_set_header X-Forwarded-Proto $the_scheme; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header Host $http_host; + proxy_set_header Scheme $scheme; + proxy_set_header Server-Protocol $server_protocol; + proxy_set_header Server-Name $server_name; + proxy_set_header Server-Addr $server_addr; + proxy_set_header Server-Port $server_port; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection $connection_upgrade; + } } include servers/*;