From c725eaac2daac0d1a789750ff4a04479b0a0c5b9 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 06 八月 2025 17:22:28 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev_7004
---
src/components/filePreview/index.vue | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 202 insertions(+), 0 deletions(-)
diff --git a/src/components/filePreview/index.vue b/src/components/filePreview/index.vue
new file mode 100644
index 0000000..cda5b56
--- /dev/null
+++ b/src/components/filePreview/index.vue
@@ -0,0 +1,202 @@
+<template>
+ <el-dialog v-model="dialogVisible" title="棰勮" width="100%" fullscreen align-center :before-close="handleClose" append-to-body>
+ <div>
+ <!-- 鍥剧墖棰勮 -->
+ <div v-if="isImage">
+ <img :src="imgUrl" alt="Image Preview" />
+ </div>
+
+ <!-- PDF棰勮鎻愮ず -->
+ <div v-if="isPdf" style="height: 100vh; display: flex; align-items: center; justify-content: center;">
+ <p>姝ｅ湪鍑嗗PDF棰勮...</p>
+ </div>
+
+ <!-- Word鏂囨。棰勮 -->
+ <div v-if="isDoc">
+ <p v-if="!isDocShow">鏂囨。鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl" v-if="!isDocShow">涓嬭浇鏂囦欢</a>
+ <vue-office-docx
+ v-else
+ :src="fileUrl"
+ style="height: 100vh;"
+ @rendered="renderedHandler"
+ @error="errorHandler"
+ />
+ </div>
+
+ <!-- Excel鏂囨。棰勮 -->
+ <div v-if="isXls">
+ <p v-if="!isDocShow">鏂囨。鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl" v-if="!isDocShow">涓嬭浇鏂囦欢</a>
+ <vue-office-excel
+ v-else
+ :src="fileUrl"
+ :options="options"
+ style="height: 100vh;"
+ @rendered="renderedHandler"
+ @error="errorHandler"
+ />
+ </div>
+
+ <!-- 鍘嬬缉鏂囦欢澶勭悊 -->
+ <div v-if="isZipOrRar">
+ <p>鍘嬬缉鏂囦欢鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl">涓嬭浇鏂囦欢</a>
+ </div>
+
+ <!-- 涓嶆敮鎸佺殑鏍煎紡 -->
+ <div v-if="!isSupported">
+ <p>涓嶆敮鎸佺殑鏂囦欢鏍煎紡</p>
+ </div>
+ </div>
+ </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, getCurrentInstance, watch } from 'vue';
+import VueOfficeDocx from '@vue-office/docx';
+import '@vue-office/docx/lib/index.css';
+import VueOfficeExcel from '@vue-office/excel';
+import '@vue-office/excel/lib/index.css';
+
+// 鍝嶅簲寮忓彉閲�
+const fileUrl = ref('')
+const dialogVisible = ref(false)
+const { proxy } = getCurrentInstance();
+const javaApi = proxy.javaApi;
+
+// 鏂囨。棰勮鐘舵��
+const isDocShow = ref(true);
+const imgUrl = ref('');
+const options = ref({
+ xls: false,
+ minColLength: 0,
+ minRowLength: 0,
+ widthOffset: 10,
+ heightOffset: 10,
+ beforeTransformData: (workbookData) => workbookData,
+ transformData: (workbookData) => workbookData,
+});
+
+// 璁＄畻灞炴�� - 鍒ゆ柇鏂囦欢绫诲瀷
+const isImage = computed(() => {
+ const state = /\.(jpg|jpeg|png|gif)$/i.test(fileUrl.value);
+ if (state) {
+ imgUrl.value = fileUrl.value.replaceAll('word', 'img');
+ }
+ return state;
+});
+
+const isPdf = computed(() => {
+ console.log(fileUrl.value)
+ return /\.pdf$/i.test(fileUrl.value);
+});
+
+const isDoc = computed(() => {
+ return /\.(doc|docx)$/i.test(fileUrl.value);
+});
+
+const isXls = computed(() => {
+ const state = /\.(xls|xlsx)$/i.test(fileUrl.value);
+ if (state) {
+ options.value.xls = /\.(xls)$/i.test(fileUrl.value);
+ }
+ return state;
+});
+
+const isZipOrRar = computed(() => {
+ return /\.(zip|rar)$/i.test(fileUrl.value);
+});
+
+const isSupported = computed(() => {
+ return isImage.value || isPdf.value || isDoc.value || isXls.value || isZipOrRar.value;
+});
+
+// 鍔ㄦ�佸垱寤篴鏍囩骞惰烦杞瑙圥DF
+const previewPdf = (url) => {
+ // 鍒涘缓a鏍囩
+ const link = document.createElement('a');
+ // 璁剧疆PDF鏂囦欢URL
+ link.href = url;
+ // 鍦ㄦ柊鏍囩椤垫墦寮�
+ link.target = '_blank';
+ // 瀹夊叏灞炴�э紝闃叉鏂伴〉闈㈣闂師椤甸潰
+ link.rel = 'noopener noreferrer';
+ // 鍙�夛細璁剧疆閾炬帴鏂囨湰
+ link.textContent = '棰勮PDF';
+ // 灏哸鏍囩娣诲姞鍒伴〉闈紙閮ㄥ垎娴忚鍣ㄨ姹傚繀椤诲湪DOM涓級
+ document.body.appendChild(link);
+ // 瑙﹀彂鐐瑰嚮浜嬩欢
+ link.click();
+ // 绉婚櫎a鏍囩锛屾竻鐞咲OM
+ document.body.removeChild(link);
+};
+
+
+// 鐩戝惉PDF鐘舵�佸彉鍖栵紝鑷姩瑙﹀彂璺宠浆
+watch(
+ () => isPdf.value,
+ (newVal) => {
+
+ // 褰撶‘璁ゆ槸PDF涓旀枃浠禪RL鏈夋晥鏃�
+ if (newVal && fileUrl.value) {
+ // 鍏抽棴瀵硅瘽妗�
+ dialogVisible.value = false;
+ // 鍔犱釜灏忓欢杩熺‘淇濈姸鎬佹洿鏂板畬鎴�
+ setTimeout(() => {
+ previewPdf(fileUrl.value);
+ fileUrl.value = '';
+ }, 100);
+ }
+ }
+);
+
+// 鏂规硶瀹氫箟
+const renderedHandler = () => {
+ console.log("娓叉煋瀹屾垚");
+ isDocShow.value = true;
+ resetStyle();
+};
+
+const errorHandler = () => {
+ console.log("娓叉煋澶辫触");
+ isDocShow.value = false;
+};
+
+const open = (url) => {
+ fileUrl.value = window.location.protocol+'//'+window.location.host+ url;
+ dialogVisible.value = true;
+};
+const handleClose = () => {
+ dialogVisible.value = false;
+};
+
+const resetStyle = () => {
+ const elements = document.querySelectorAll('[style*="pt"]');
+ for (const element of elements) {
+ const style = element.getAttribute('style');
+ if (style) {
+ element.setAttribute('style', style.replace(/pt/g, 'px'));
+ }
+ }
+};
+
+// 鏆撮湶open鏂规硶渚涘閮ㄨ皟鐢�
+defineExpose({
+ open
+})
+</script>
+
+<style scoped>
+img {
+ max-width: 100%;
+ display: block;
+ margin: 0 auto;
+}
+
+.oneLine {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+</style>
--
Gitblit v1.9.3