From 3df460667d74868d0a54fce12d5e881bbd6c0c1a Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期四, 17 九月 2026 17:11:18 +0800
Subject: [PATCH] 青岛维护统计
---
src/components/FilePreviewDialog/index.vue | 129 ++++++++++++++++++++++++++++++++++++------
1 files changed, 109 insertions(+), 20 deletions(-)
diff --git a/src/components/FilePreviewDialog/index.vue b/src/components/FilePreviewDialog/index.vue
index ff472c1..357c237 100644
--- a/src/components/FilePreviewDialog/index.vue
+++ b/src/components/FilePreviewDialog/index.vue
@@ -11,7 +11,10 @@
>
<!-- 鍔犺浇鐘舵�� -->
<div v-if="loading" class="preview-loading">
- <i class="el-icon-loading" style="font-size: 40px; margin-bottom: 16px;"></i>
+ <i
+ class="el-icon-loading"
+ style="font-size: 40px; margin-bottom: 16px;"
+ ></i>
<span>鏂囦欢鍔犺浇涓�...</span>
</div>
@@ -19,11 +22,19 @@
<div v-else-if="fileType === 'image'" class="preview-container">
<div class="image-toolbar">
<el-button-group>
- <el-button size="mini" @click="zoomImageIn" :disabled="imageScale >= 300">
+ <el-button
+ size="mini"
+ @click="zoomImageIn"
+ :disabled="imageScale >= 300"
+ >
<i class="el-icon-zoom-in"></i> 鏀惧ぇ
</el-button>
<el-button size="mini" disabled>{{ imageScale }}%</el-button>
- <el-button size="mini" @click="zoomImageOut" :disabled="imageScale <= 50">
+ <el-button
+ size="mini"
+ @click="zoomImageOut"
+ :disabled="imageScale <= 50"
+ >
<i class="el-icon-zoom-out"></i> 缂╁皬
</el-button>
<el-button size="mini" @click="resetImageZoom">
@@ -50,7 +61,7 @@
<!-- PDF棰勮 -->
<div v-else-if="fileType === 'pdf'" class="preview-container pdf-preview">
<div class="pdf-toolbar">
- <el-button-group>
+ <el-button-group v-if="!useNativePdf">
<el-button
size="mini"
@click="changePage(currentPage - 1)"
@@ -70,7 +81,7 @@
</el-button>
</el-button-group>
- <el-button-group class="zoom-controls">
+ <el-button-group v-if="!useNativePdf" class="zoom-controls">
<el-button size="mini" @click="zoomOut" :disabled="scale <= 50">
<i class="el-icon-zoom-out"></i> 缂╁皬
</el-button>
@@ -83,16 +94,20 @@
</el-button>
</el-button-group>
- <el-button
- size="mini"
- type="success"
- @click="handleDownload"
- >
+ <el-button size="mini" type="success" @click="handleDownload">
<i class="el-icon-download"></i> 涓嬭浇
</el-button>
</div>
- <div class="pdf-content" v-loading="pdfLoading">
+ <!-- pdf.js 鍥犺法鍩�(CORS)鍔犺浇澶辫触鏃讹紝闄嶇骇涓烘祻瑙堝櫒鍘熺敓 PDF 棰勮锛坕frame 瀵艰埅涓嶅彈鍚屾簮绛栫暐闄愬埗锛� -->
+ <iframe
+ v-if="useNativePdf"
+ :src="fileUrl"
+ class="pdf-native-iframe"
+ frameborder="0"
+ ></iframe>
+
+ <div class="pdf-content" v-else v-loading="pdfLoading">
<pdf
ref="pdf"
:src="pdfUrl"
@@ -111,7 +126,10 @@
</div>
<!-- Office鏂囨。棰勮 -->
- <div v-else-if="fileType === 'office'" class="preview-container office-preview">
+ <div
+ v-else-if="fileType === 'office'"
+ class="preview-container office-preview"
+ >
<div class="office-toolbar">
<el-alert
title="Office鏂囨。棰勮鎻愮ず"
@@ -127,7 +145,11 @@
<div class="office-content">
<iframe
- :src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(fileUrl)}`"
+ :src="
+ `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
+ fileUrl
+ )}`
+ "
width="100%"
height="600px"
frameborder="0"
@@ -177,6 +199,11 @@
type: Object,
default: () => ({})
}
+ // 娣诲姞baseUrlHt浣滀负props浼犲叆
+ // baseUrlHt: {
+ // type: String,
+ // default: process.env.VUE_APP_BASE_API
+ // }
},
data() {
return {
@@ -185,6 +212,7 @@
// 鍔犺浇鐘舵��
loading: false,
pdfLoading: false,
+ baseUrlHt: "",
// 鏂囦欢淇℃伅
fileUrl: "",
fileName: "",
@@ -194,6 +222,8 @@
pageCount: 0,
scale: 100,
pageRotate: 0,
+ // pdf.js 鍔犺浇澶辫触锛堝 CORS锛夋椂闄嶇骇涓烘祻瑙堝櫒鍘熺敓棰勮
+ useNativePdf: false,
// 鍥剧墖鐩稿叧
imageScale: 100
};
@@ -214,19 +244,57 @@
}
},
previewVisible(newVal) {
- this.$emit('update:visible', newVal);
+ this.$emit("update:visible", newVal);
if (!newVal) {
this.handleClose();
}
}
},
+ created() {
+ this.calculateBaseUrl();
+ },
methods: {
+ /** URL澶勭悊鍑芥暟 - 灏嗗畬鏁碪RL鏇挎崲涓篵aseUrlHt */
+ processFileUrl(url) {
+ if (!url) return "";
+
+ // 濡傛灉宸茬粡鏄畬鏁寸殑http鎴杊ttps閾炬帴
+ if (url.startsWith("http://") || url.startsWith("https://")) {
+ // 鎵惧埌绗笁涓枩鏉犲悗鐨勪綅缃紝鎻愬彇璺緞閮ㄥ垎
+ const thirdSlashIndex = url.indexOf("/", 8); // 浠巋ttp://鎴杊ttps://涔嬪悗寮�濮嬫壘
+ if (thirdSlashIndex !== -1) {
+ return `${this.baseUrlHt}${url.substring(thirdSlashIndex)}`;
+ }
+ return this.baseUrlHt; // 濡傛灉娌℃湁璺緞閮ㄥ垎锛屽彧杩斿洖baseUrlHt
+ }
+
+ // 鐩稿璺緞澶勭悊
+ if (url.startsWith("/")) {
+ return `${this.baseUrlHt}${url}`;
+ }
+
+ return `${this.baseUrlHt}/${url}`;
+ },
+ /** 璁＄畻 baseUrlHt */
+ calculateBaseUrl() {
+ // 璧板綋鍓嶅煙鍚嶏紙鍚屽煙鐩稿璺緞锛夛紝鐢� nginx 鐨� /profile/ 浠ｇ悊杞彂鍒板悗绔� 9095銆�
+ // 鐩磋繛 9095 绔彛浼氬洜绔彛涓嶅悓浜х敓璺ㄥ煙(CORS)锛岃�屽悗绔瓨鍦ㄥ弻閲� CORS 鍝嶅簲澶撮棶棰橈紝
+ // 鍚屽煙璇锋眰涓嶈Е鍙� CORS 妫�鏌ワ紝鍙粠鏍规簮涓婄粫寮�璇ラ棶棰橈紙鍥剧墖/PDF/涓嬭浇鍏ㄩ儴鐢熸晥锛夈��
+ this.baseUrlHt = "";
+ console.log("鏂囦欢璁块棶璧板悓鍩熶唬鐞�: /profile/");
+ },
+
/** 鍒濆鍖栭瑙� */
initPreview() {
if (!this.file) return;
this.fileName = this.file.fileName || this.file.name || "鏈煡鏂囦欢";
- this.fileUrl = this.file.fileUrl || this.file.path || this.file.url;
+ const originalUrl = this.file.fileUrl || this.file.path || this.file.url;
+
+ // 澶勭悊URL锛屾浛鎹㈠煙鍚嶉儴鍒�
+ this.fileUrl = this.processFileUrl(originalUrl);
+ console.log(this.fileUrl,'this.fileUrl');
+
this.fileType = this.getFileType(this.fileName);
this.loading = true;
@@ -236,6 +304,7 @@
this.scale = 100;
this.imageScale = 100;
this.pageCount = 0;
+ this.useNativePdf = false;
// 妯℃嫙鍔犺浇寤惰繜
setTimeout(() => {
@@ -250,7 +319,10 @@
getFileType(fileName) {
if (!fileName) return "other";
- const extension = fileName.split('.').pop().toLowerCase();
+ const extension = fileName
+ .split(".")
+ .pop()
+ .toLowerCase();
const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
const pdfTypes = ["pdf"];
const officeTypes = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
@@ -263,7 +335,12 @@
/** 鑾峰彇鏂囦欢鎵╁睍鍚� */
getFileExtension(filename) {
- return filename.split('.').pop().toLowerCase() || "鏈煡";
+ return (
+ filename
+ .split(".")
+ .pop()
+ .toLowerCase() || "鏈煡"
+ );
},
/** PDF鍔犺浇瀹屾垚 */
@@ -276,8 +353,13 @@
pdfErrorHandler(error) {
console.error("PDF鍔犺浇澶辫触:", error);
this.pdfLoading = false;
- this.$message.error("PDF鏂囦欢鍔犺浇澶辫触锛岃灏濊瘯涓嬭浇鍚庢煡鐪�");
- this.previewVisible = false;
+ // pdf.js 閫氳繃 fetch 鍔犺浇璺ㄥ煙 PDF 鍙� CORS 闄愬埗锛屽け璐ユ椂闄嶇骇涓烘祻瑙堝櫒鍘熺敓棰勮
+ // 锛坕frame 灞炰簬瀵艰埅璇锋眰锛屼笉鍙楀悓婧愮瓥鐣ラ檺鍒讹紝鍙互姝ｅ父鍔犺浇璺ㄥ煙 PDF锛�
+ this.useNativePdf = true;
+ this.$message({
+ type: "info",
+ message: "宸插垏鎹负娴忚鍣ㄥ師鐢熼瑙堟ā寮�"
+ });
},
/** 鍥剧墖鍔犺浇瀹屾垚 */
@@ -337,7 +419,7 @@
this.imageScale = 100;
},
- /** 涓嬭浇鏂囦欢 */
+ /** 涓嬭浇鏂囦欢 - 涔熼渶瑕佸鐞哢RL */
handleDownload() {
if (!this.fileUrl) {
this.$message.warning("鏂囦欢璺緞涓嶅瓨鍦紝鏃犳硶涓嬭浇");
@@ -429,6 +511,13 @@
align-items: flex-start;
}
+ /* 鍘熺敓 PDF 棰勮锛圕ORS 闄嶇骇鏂规锛� */
+ .pdf-native-iframe {
+ flex: 1;
+ border: none;
+ background: #f8f9fa;
+ }
+
/* Office棰勮鏍峰紡 */
.office-content {
flex: 1;
--
Gitblit v1.9.3