lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加iframe预览配置

Browse Source
This commit is contained in:
jmal 2024-06-20 18:21:12 +08:00
parent f4124eb913
commit 5a6c41afe6
7 changed files with 253 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/ShowFile/ShowFile.vue
View File

@ -658,10 +658,11 @@
:file="videoPreviewRow"
:status.sync="videoPreviewVisible"
></video-preview>
<office-preview
:file="officePreviewRow"
:status.sync="officePreviewVisible"
></office-preview>
<iframe-preview
:file="iframePreviewRow"
:fileHandler="fileHandler"
:status.sync="iframePreviewVisible"
></iframe-preview>
<file-details :audio-cover-url="audioCoverUrl" :image-url="imageUrl" :row-context-data="rowContextData" :visible.sync="drawer"></file-details>
@ -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

16
src/components/office/OnlyOfficeEditor.vue
View File

@ -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,
},

169
src/components/preview/IframeContentPreview.vue Normal file
View File

@ -0,0 +1,169 @@
<template>
<div>
<div class="top-bar">
<div class="top-left"></div>
<div class="top-center">{{file.name}}</div>
<div class="top-right">
<div class="top-right-option">
<el-select v-if="services.length > 1" size="medium" v-model="url" placeholder="请选择">
<el-option
v-for="item in services"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-button size="medium" type="primary" @click="openUrl"><svg-icon icon-class="wailian"/></el-button>
</div>
</div>
</div>
<div class="iframe-content">
<iframe ref="iframeContent" name="Iframe Content Preview" :title="file.name" :src="url"></iframe>
</div>
</div>
</template>
<script>
export default {
name: "IframeContentPreview",
props: {
fileUrl: {
type: String,
default: ''
},
file: {
type: Object,
default: function () {
return {}
}
},
fileHandler: {
type: Object,
default: undefined
}
},
data() {
return {
url: undefined,
services: []
}
},
mounted() {
this.iframeLoad()
},
methods: {
iframeLoad() {
if (this.fileHandler) {
console.log('this.fileHandler', this.fileHandler);
for (let service in this.fileHandler) {
const urlTemplate = this.fileHandler[service]
if (!urlTemplate) {
continue
}
const url = decodeURI(this.fileUrl)
if (urlTemplate.indexOf('$e_url') > 0) {
this.url = urlTemplate.replace('$e_url', encodeURIComponent(url))
this.services.push({label: service, value: this.url})
}
if (urlTemplate.indexOf('$eb_url') > 0) {
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
this.services = []
}
const iframe = this.$refs.iframeContent;
if (iframe.attachEvent) {
iframe.attachEvent('onload', () => {
this.onReady()
})
} else {
iframe.onload = () => {
this.onReady()
}
}
},
base64EncodeUnicode(str) {
// 首先，将字符串编码为 UTF-8
const utf8Bytes = new TextEncoder().encode(str);
// 然后，将 Uint8Array 转换为字符串
const binaryStr = String.fromCharCode(...utf8Bytes);
// 最后，使用 btoa 编码为 Base64
return btoa(binaryStr);
},
onReady() {
this.$emit('onReady')
// this.url = 'http://192.168.0.233:8012/onlinePreview?url='+encodeURIComponent(this.base64EncodeUnicode('https://cloud.jmal.top/api/file/jmal/tewo/海印缤缤广场/冷机智能控制系统布线图.pdf'))
//this.url = 'https://alist-org.github.io/pdf.js/web/viewer.html?file=' + encodeURIComponent('http://localhost:9528/api/file/jmal/jmal/share/滨滨广场冷冻侧采集箱布线图_副本 (1).pdf')
if (!this.url) {
this.$emit('loadFileFailed')
}
},
openUrl() {
window.open(this.url)
}
}
}
</script>
<style lang="scss" scoped>
.top-bar {
width: 100%;
position: absolute;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
background: #fff;
}
.top-left {
width: 25%;
}
.top-center {
width: 50%;
text-align: center;
align-content: center;
}
.top-right {
width: 25%;
.svg-icon {
font-size: 14px;
}
.top-right-option {
float: right;
margin-right: 3rem;
display: flex;
align-items: center;
justify-content: flex-end;
height: 2.5rem;
line-height: 2.5rem;
}
>>> .el-select {
width: 135px;
margin-right: 10px;
}
}
.iframe-content {
position: absolute;
top: 2.5rem;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
iframe {
width: 100%;
height: 100%;
border: 0;
}
}
</style>

24
src/components/preview/OfficePreview.vue → src/components/preview/IframePreview.vue
View File

@ -16,11 +16,13 @@
<svg-icon class="preview-close" icon-class="close"/>
</div>
<div class="wrapper">
<div>{{fileType}}</div>
<pdf-preview v-if="fileType === 'pdf'" :file="file" :shareId="shareId" :file-url="fileUrl" @onReady="onReady"></pdf-preview>
<drawio v-else-if="fileType === 'drawio'" v-show="fileReday" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></drawio>
<my-mind-editor v-else-if="fileType === 'mind'" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></my-mind-editor>
<model-preview v-else-if="fileType === 'glTF/GLB'" :file="file" :file-url="fileUrl" :shareId="shareId" @onReady="onReady"></model-preview>
<only-office-editor ref="officeEditor" v-else :file="file" :file-url="fileUrl" :shareId="shareId" :sharer="sharer" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
<only-office-editor ref="officeEditor" v-else-if="fileType === 'office'" :file="file" :file-url="fileUrl" :shareId="shareId" :sharer="sharer" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
<iframe-content-preview v-else :file="file" :fileHandler="fileHandler" :file-url="fileUrl" @onReady="onReady" @loadFileFailed="loadFileFailed"></iframe-content-preview>
</div>
</div>
</div>
@ -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'
}
},
/**

2
src/styles/home-index.scss
View File

@ -285,7 +285,7 @@
}
>>> .van-grid {
padding: 0;
padding-left: 10px;
}
>>> .van-grid-item__content .svg-icon{

6
src/views/home/mobile/index.vue
View File

@ -268,7 +268,7 @@
<sim-text-preview :file.sync="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
<image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
<video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
<office-preview :file="officePreviewRow" :status.sync="officePreviewVisible"></office-preview>
<iframe-preview :file="officePreviewRow" :status.sync="officePreviewVisible"></iframe-preview>
</div>
</template>
<script>
@ -283,12 +283,12 @@ import ImageViewer from "@/components/preview/ImageViewer";
import VideoPreview from "@/components/preview/VideoPreview";
import SimTextPreview from "@/components/preview/SimTextPreview";
import {suffix} from "@/utils/file-type";
import OfficePreview from "@/components/preview/OfficePreview";
import IframePreview from "@/components/preview/IframePreview.vue";
import Clipboard from "clipboard";
export default {
components: {
OfficePreview,
IframePreview,
SimTextPreview,
VideoPreview,
ImageViewer, IconFile,

6
src/views/public/share/shareList.vue
View File

@ -255,7 +255,7 @@
<image-viewer :fileList="fileList" :shareId="shareId" :file="imagePreviewRow"
:status.sync="imagePreviewVisible"></image-viewer>
<video-preview :file="videoPreviewRow" :shareId="shareId" :status.sync="videoPreviewVisible"></video-preview>
<office-preview :file="officePreviewRow" :shareId="shareId" :sharer="sharerUsername" :status.sync="officePreviewVisible"></office-preview>
<iframe-preview :file="officePreviewRow" :shareId="shareId" :sharer="sharerUsername" :status.sync="officePreviewVisible"></iframe-preview>
<el-divider v-if="!linkFailed && !showShareCode" class="grid-divider" content-position="center"><i
class="el-icon-folder-opened"></i>&nbsp;{{ summaries }}
</el-divider>
@ -290,7 +290,7 @@ import VideoPreview from "@/components/preview/VideoPreview";
import AudioPreview from "@/components/preview/AudioPreview";
import fileConfig from "@/utils/file-config";
import Clipboard from "clipboard";
import OfficePreview from "@/components/preview/OfficePreview";
import IframePreview from "@/components/preview/IframePreview.vue";
import Logo from "@/components/Logo";
import store from "@/store";
import FileTree from "@/components/FileTree";
@ -299,7 +299,7 @@ export default {
components: {
FileTree,
Logo,
OfficePreview, IconFile, BreadcrumbFilePath, AlLoading,
IframePreview, IconFile, BreadcrumbFilePath, AlLoading,
AudioPreview, VideoPreview, ImageViewer, SimTextPreview
},
data() {