From 392e1953079cd5830b6923ce5f7a0a3ed00096fd Mon Sep 17 00:00:00 2001
From: "2358328281@qq.com" <邮箱地址>
Date: Tue, 23 Jun 2026 20:27:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9pdf=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilePreviewDialog.vue | 203 +++++++++++++++++++++++++++
 src/views/admin/hospitals/list.vue   |  93 +++++++++---
 src/views/admin/orders/detail.vue    |  54 +++----
 3 files changed, 300 insertions(+), 50 deletions(-)
 create mode 100644 src/components/FilePreviewDialog.vue

diff --git a/src/components/FilePreviewDialog.vue b/src/components/FilePreviewDialog.vue
new file mode 100644
index 0000000..8eff5b8
--- /dev/null
+++ b/src/components/FilePreviewDialog.vue
@@ -0,0 +1,203 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="fileName || $t('btn.preview')"
+    width="80%"
+    top="5vh"
+    destroy-on-close
+    :before-close="handleClose"
+    @update:model-value="(v) => !v && handleClose()"
+  >
+    <template #header>
+      <div class="file-preview-header">
+        <span class="file-preview-title" :title="fileName">{{ fileName || $t('btn.preview') }}</span>
+        <div class="file-preview-tools">
+          <template v-if="fileType === 'pdf'">
+            <el-button size="small" :disabled="pageScale <= 0.5" @click="scaleDown">
+              <el-icon><ZoomOut /></el-icon>
+            </el-button>
+            <span class="scale-text">{{ Math.round(pageScale * 100) }}%</span>
+            <el-button size="small" :disabled="pageScale >= 2.5" @click="scaleUp">
+              <el-icon><ZoomIn /></el-icon>
+            </el-button>
+            <el-button size="small" :disabled="currentPage <= 1" @click="prevPage">
+              <el-icon><ArrowLeft /></el-icon>
+            </el-button>
+            <span class="page-text">{{ currentPage }} / {{ totalPages }}</span>
+            <el-button size="small" :disabled="currentPage >= totalPages" @click="nextPage">
+              <el-icon><ArrowRight /></el-icon>
+            </el-button>
+          </template>
+          <el-button type="primary" size="small" @click="handleDownload">
+            <el-icon><Download /></el-icon>
+            <span style="margin-left: 4px">{{ $t('btn.download') || '下载' }}</span>
+          </el-button>
+        </div>
+      </div>
+    </template>
+
+    <div v-loading="loading" class="file-preview-body">
+      <VuePdfEmbed
+        v-if="fileType === 'pdf' && blobUrl"
+        :source="blobUrl"
+        :page="currentPage"
+        :scale="pageScale"
+        class="pdf-viewer"
+        @loaded="onPdfLoaded"
+        @loading-failed="onPdfError"
+      />
+      <img
+        v-else-if="fileType === 'image' && blobUrl"
+        :src="blobUrl"
+        class="image-viewer"
+      />
+      <div v-else class="file-preview-empty">
+        {{ $t('msg.noPreview') || '暂不支持预览该类型' }}
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import VuePdfEmbed from "vue-pdf-embed";
+import { ArrowLeft, ArrowRight, Download, ZoomIn, ZoomOut } from "@element-plus/icons-vue";
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  blobUrl: { type: String, default: "" },
+  fileName: { type: String, default: "" },
+  fileType: { type: String, default: "" }, // 'pdf' | 'image' | 'other'
+  // 用于下载：传完整 Blob（推荐），不传则用 blobUrl 抓
+  blob: { type: Blob, default: null },
+});
+
+const emit = defineEmits(["update:visible", "close", "download"]);
+
+const loading = ref(false);
+const currentPage = ref(1);
+const totalPages = ref(0);
+const pageScale = ref(1);
+
+// 弹窗关闭时清理状态
+const handleClose = () => {
+  emit("update:visible", false);
+  emit("close");
+};
+
+// 接收父组件传来的下载动作（由父组件负责 downloadBlob + 文件名）
+const handleDownload = () => {
+  emit("download", { blob: props.blob, blobUrl: props.blobUrl, fileName: props.fileName });
+};
+
+// PDF 加载完成回填总页数
+const onPdfLoaded = (pdfDoc) => {
+  loading.value = false;
+  totalPages.value = pdfDoc?.numPages || 0;
+  currentPage.value = 1;
+};
+
+const onPdfError = (err) => {
+  loading.value = false;
+  console.error("PDF 加载失败:", err);
+};
+
+const prevPage = () => {
+  if (currentPage.value > 1) currentPage.value -= 1;
+};
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) currentPage.value += 1;
+};
+
+const scaleDown = () => {
+  if (pageScale.value > 0.5) pageScale.value = Math.round((pageScale.value - 0.25) * 100) / 100;
+};
+
+const scaleUp = () => {
+  if (pageScale.value < 2.5) pageScale.value = Math.round((pageScale.value + 0.25) * 100) / 100;
+};
+
+// visible 变化时控制 loading
+watch(
+  () => props.visible,
+  (v) => {
+    if (v) {
+      loading.value = props.fileType === "pdf";
+      currentPage.value = 1;
+      totalPages.value = 0;
+      pageScale.value = 1;
+    }
+  },
+);
+</script>
+
+<style scoped lang="scss">
+.file-preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding-right: 8px;
+}
+
+.file-preview-title {
+  flex: 1;
+  font-size: 16px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-preview-tools {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.scale-text,
+.page-text {
+  min-width: 48px;
+  text-align: center;
+  font-size: 13px;
+  color: #606266;
+}
+
+.file-preview-body {
+  min-height: 60vh;
+  max-height: 80vh;
+  overflow: auto;
+  background: #f5f7fa;
+  border-radius: 4px;
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.pdf-viewer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.image-viewer {
+  max-width: 100%;
+  max-height: 75vh;
+  object-fit: contain;
+  display: block;
+  margin: auto;
+}
+
+.file-preview-empty {
+  width: 100%;
+  text-align: center;
+  color: #909399;
+  padding: 60px 0;
+}
+</style>
diff --git a/src/views/admin/hospitals/list.vue b/src/views/admin/hospitals/list.vue
index 198b039..a98d294 100644
--- a/src/views/admin/hospitals/list.vue
+++ b/src/views/admin/hospitals/list.vue
@@ -84,20 +84,16 @@
       </div>
     </el-card>
 
-    <el-dialog
-      v-model="previewVisible"
-      :title="$t('btn.preview')"
-      width="80%"
-      top="5vh"
-      destroy-on-close
-      :before-close="closePreview"
-    >
-      <iframe
-        v-if="previewUrl"
-        :src="previewUrl"
-        class="preview-iframe"
-      />
-    </el-dialog>
+    <FilePreviewDialog
+      :visible="previewVisible"
+      :blob-url="previewUrl"
+      :blob="previewBlob"
+      :file-name="previewName"
+      :file-type="previewType"
+      @update:visible="(v) => (previewVisible = v)"
+      @close="cleanupPreview"
+      @download="onPreviewDownload"
+    />
   </div>
 </template>
 
@@ -108,6 +104,7 @@ import { ElMessage } from "element-plus";
 import dayjs from "dayjs";
 import { useI18n } from "vue-i18n";
 import { getAdminHospitals, getUploadFile } from "@/service/modular/admin";
+import FilePreviewDialog from "@/components/FilePreviewDialog.vue";
 
 const { t: $t } = useI18n();
 const router = useRouter();
@@ -171,27 +168,77 @@ const goAdd = () => router.push("/admin/hospitals/edit");
 
 const previewVisible = ref(false);
 const previewUrl = ref("");
+const previewBlob = ref(null);
+const previewName = ref("");
+const previewType = ref(""); // 'pdf' | 'image' | ''
 
-const cleanupPreviewUrl = () => {
+const cleanupPreview = () => {
   if (previewUrl.value) {
     URL.revokeObjectURL(previewUrl.value);
     previewUrl.value = "";
   }
+  previewBlob.value = null;
+  previewName.value = "";
+  previewType.value = "";
 };
 
-const closePreview = () => {
-  previewVisible.value = false;
-  cleanupPreviewUrl();
+// 从路径中提取最后的文件名（含扩展名）作为下载名
+const getFileNameFromPath = (path) => {
+  if (!path) return "";
+  return String(path).replace(/\\/g, "/").split("/").filter(Boolean).pop() || "";
+};
+
+// 根据文件名/扩展名+blob 的 mime 判断文件类型
+const getFileType = (fileName, blob) => {
+  const name = String(fileName || "");
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  const mime = blob?.type || "";
+  if (ext === "pdf" || mime === "application/pdf") return "pdf";
+  if (
+    ["jpg", "jpeg", "png", "gif", "bmp", "webp", "svg"].includes(ext) ||
+    (mime && mime.startsWith("image/"))
+  ) {
+    return "image";
+  }
+  return "other";
+};
+
+// 浏览器直接下载 blob（指定文件名）
+const downloadBlob = (blob, fileName) => {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName || "download";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+};
+
+// FilePreviewDialog 下载按钮回调
+const onPreviewDownload = ({ blob, fileName }) => {
+  if (!blob) return;
+  downloadBlob(blob, fileName);
 };
 
 const viewReport = async (attachmentPath) => {
   if (!attachmentPath) return;
-  const fileName = String(attachmentPath);
+  const path = String(attachmentPath);
+  const downloadName = getFileNameFromPath(path) || path;
   try {
-    const blob = await getUploadFile(fileName);
-    cleanupPreviewUrl();
-    previewUrl.value = URL.createObjectURL(blob);
-    previewVisible.value = true;
+    const blob = await getUploadFile(path);
+    const type = getFileType(downloadName, blob);
+    // PDF / 图片走预览弹窗（PDF 走 vue-pdf-embed），其他格式直接下载
+    if (type === "pdf" || type === "image") {
+      cleanupPreview();
+      previewBlob.value = blob;
+      previewUrl.value = URL.createObjectURL(blob);
+      previewName.value = downloadName;
+      previewType.value = type;
+      previewVisible.value = true;
+    } else {
+      downloadBlob(blob, downloadName);
+    }
   } catch (e) {
     ElMessage.error(e?.message || $t('msg.failed'));
   }
diff --git a/src/views/admin/orders/detail.vue b/src/views/admin/orders/detail.vue
index 3601445..90cde3e 100644
--- a/src/views/admin/orders/detail.vue
+++ b/src/views/admin/orders/detail.vue
@@ -244,25 +244,16 @@
       </template>
     </el-dialog>
 
-    <el-dialog
-      v-model="previewVisible"
-      :title="$t('btn.preview')"
-      width="80%"
-      top="5vh"
-      destroy-on-close
-      :before-close="closePreview"
-    >
-      <iframe
-        v-if="previewType === 'pdf' && previewUrl"
-        :src="previewUrl"
-        class="preview-iframe"
-      />
-      <img
-        v-else-if="previewType === 'image' && previewUrl"
-        :src="previewUrl"
-        class="preview-image"
-      />
-    </el-dialog>
+    <FilePreviewDialog
+      :visible="previewVisible"
+      :blob-url="previewUrl"
+      :blob="previewBlob"
+      :file-name="previewName"
+      :file-type="previewType"
+      @update:visible="(v) => (previewVisible = v)"
+      @close="cleanupPreview"
+      @download="onPreviewDownload"
+    />
   </div>
 </template>
 
@@ -288,6 +279,7 @@ import {
   getUploadFile,
   updateAdminOrder,
 } from "@/service/modular/admin";
+import FilePreviewDialog from "@/components/FilePreviewDialog.vue";
 
 const { t: $t } = useI18n();
 const route = useRoute();
@@ -312,21 +304,20 @@ const goBack = () => router.back();
 
 const previewVisible = ref(false);
 const previewUrl = ref("");
+const previewBlob = ref(null);
+const previewName = ref("");
 const previewType = ref(""); // 'pdf' | 'image' | ''
 
-const cleanupPreviewUrl = () => {
+const cleanupPreview = () => {
   if (previewUrl.value) {
     URL.revokeObjectURL(previewUrl.value);
     previewUrl.value = "";
   }
+  previewBlob.value = null;
+  previewName.value = "";
   previewType.value = "";
 };
 
-const closePreview = () => {
-  previewVisible.value = false;
-  cleanupPreviewUrl();
-};
-
 // 根据文件名/扩展名+blob 的 mime 判断文件类型
 const getFileType = (fileName, blob) => {
   const name = String(fileName || "");
@@ -342,7 +333,7 @@ const getFileType = (fileName, blob) => {
   return "other";
 };
 
-// 浏览器直接下载 blob
+// 浏览器直接下载 blob（指定文件名）
 const downloadBlob = (blob, fileName) => {
   const url = URL.createObjectURL(blob);
   const a = document.createElement("a");
@@ -354,6 +345,12 @@ const downloadBlob = (blob, fileName) => {
   setTimeout(() => URL.revokeObjectURL(url), 0);
 };
 
+// FilePreviewDialog 下载按钮回调
+const onPreviewDownload = ({ blob, fileName }) => {
+  if (!blob) return;
+  downloadBlob(blob, fileName);
+};
+
 const viewReport = async (attachmentPath, originalName) => {
   if (!attachmentPath) return;
   const path = String(attachmentPath);
@@ -361,9 +358,12 @@ const viewReport = async (attachmentPath, originalName) => {
   try {
     const blob = await getUploadFile(path);
     const type = getFileType(downloadName, blob);
+    // PDF / 图片走预览弹窗（PDF 走 vue-pdf-embed），其他格式直接下载
     if (type === "pdf" || type === "image") {
-      cleanupPreviewUrl();
+      cleanupPreview();
+      previewBlob.value = blob;
       previewUrl.value = URL.createObjectURL(blob);
+      previewName.value = downloadName;
       previewType.value = type;
       previewVisible.value = true;
     } else {