From c172f50f28cb37b982eb39a0a9a257cbc60b3a3e Mon Sep 17 00:00:00 2001 From: zhangherong <571457620@qq.com> Date: 星期二, 18 三月 2025 18:04:53 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/components/jeecg/LxFilePreview.vue | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 119 insertions(+), 0 deletions(-) diff --git a/src/components/jeecg/LxFilePreview.vue b/src/components/jeecg/LxFilePreview.vue new file mode 100644 index 0000000..6017a26 --- /dev/null +++ b/src/components/jeecg/LxFilePreview.vue @@ -0,0 +1,119 @@ +<template> + <j-modal + :title="title" + :width="800" + :visible="visible" + switchFullscreen + @ok="handleOk" + @cancel="handleCancel" + :footer="null" + cancelText="鍏抽棴"> + <a-spin :spinning="confirmLoading"> + <img v-if="isImage" :src="fileUrl" width="100%" height="100%" alt="鍥剧墖棰勮" /> + <iframe v-else-if="isPdf" :src="fileUrl" width="100%" height="600px"></iframe> + <video v-else-if="isVideo" controls> + <source :src="fileUrl" type="video/mp4"> + 鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆� + </video> + <pre v-else-if="isText">{{ textContent }}</pre> + <h1 v-else>涓嶆敮鎸侀瑙堬紝璇蜂笅杞藉悗鏌ョ湅</h1> + </a-spin> + </j-modal> +</template> + +<script> +import { getFileAccessHttpUrl } from '@/api/manage' + +export default { + props: { + fileUrl: String + }, + data() { + return { + title: '棰勮', + textContent: '', + confirmLoading: false, + visible: false + } + }, + computed: { + isImage() { + return /\.(jpeg|jpg|png|gif|bmp|webp)$/i.test(this.fileUrl) + }, + isPdf() { + return /\.pdf$/i.test(this.fileUrl) + }, + isVideo() { + return /\.(mp4|webm|ogg)$/i.test(this.fileUrl) + }, + isText() { + return /\.(txt|md|json|xml|yaml|yml)$/i.test(this.fileUrl) + } + }, + watch: { + fileUrl: 'fetchTextContent' + }, + mounted() { + if (this.isText) { + this.fetchTextContent() + } + }, + methods: { + async fetchTextContent() { + try { + const response = await fetch(this.fileUrl) + if (!response.ok) throw new Error('缃戠粶鍝嶅簲涓嶆槸OK') + const text = await response.text() + this.textContent = text + } catch (error) { + console.error('鑾峰彇鏂囨湰鍐呭澶辫触:', error) + this.textContent = '鏃犳硶鍔犺浇鏂囨湰鍐呭' + } + }, + close() { + this.$emit('close') + this.visible = false + }, + preview(fileUrl) { + let url = getFileAccessHttpUrl(fileUrl) + this.visible = true + this.fileUrl = url + }, + handleOk() { + this.close() + }, + handleCancel() { + this.close() + } + } +} +</script> + +<style lang="less" scoped> + +/deep/ .ant-modal { + height: 80%; + /* 婊氬姩鏉′紭鍖� start */ + ::-webkit-scrollbar{ + width:8px; + height:8px; + } + + .ant-modal-content { + height: 100%; + display: flex; + flex-direction: column; + + .ant-modal-body { + flex: 1; + overflow: auto; + } + } +} + +pre { + overflow: visible; +} + + +</style> \ No newline at end of file -- Gitblit v1.9.3