青岛维护统计

WXL

2026-09-17 3df460667d74868d0a54fce12d5e881bbd6c0c1a

 src/components/FilePreviewDialog/index.vue

@@ -61,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)"
@@ -81,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>
@@ -99,7 +99,15 @@
        </el-button>
      </div>

      <div class="pdf-content" v-loading="pdfLoading">
      <!-- pdf.js 因跨域(CORS)加载失败时，降级为浏览器原生 PDF 预览（iframe 导航不受同源策略限制） -->
      <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"
@@ -214,6 +222,8 @@
      pageCount: 0,
      scale: 100,
      pageRotate: 0,
      // pdf.js 加载失败（如 CORS）时降级为浏览器原生预览
      useNativePdf: false,
      // 图片相关
      imageScale: 100
    };
@@ -267,30 +277,11 @@
    },
    /** 计算 baseUrlHt */
    calculateBaseUrl() {
      // 获取当前浏览器地址
      const currentUrl = window.location.href;
      console.log("当前浏览器地址:", currentUrl);

      try {
        // 使用 URL 对象解析
        const urlObj = new URL(currentUrl);
        // 获取主机名（IP 或域名）
        const hostname = urlObj.hostname;
        // 拼接端口 :9095
        this.baseUrlHt = `http://${hostname}:9095`;
        console.log("计算得到的 baseUrlHt:", this.baseUrlHt);
      } catch (error) {
        console.error("解析URL失败:", error);
        // 备用方案：使用正则提取
        const match = currentUrl.match(/https?:\/\/([^:\/]+)/);
        if (match) {
          this.baseUrlHt = `http://${match[1]}:9095`;
        } else {
          // 最后的备用方案
          this.baseUrlHt =
            process.env.VUE_APP_BASE_API || "http://localhost:9095";
        }
      }
      // 走当前域名（同域相对路径），由 nginx 的 /profile/ 代理转发到后端 9095。
      // 直连 9095 端口会因端口不同产生跨域(CORS)，而后端存在双重 CORS 响应头问题，
      // 同域请求不触发 CORS 检查，可从根源上绕开该问题（图片/PDF/下载全部生效）。
      this.baseUrlHt = "";
      console.log("文件访问走同域代理: /profile/");
    },

    /** 初始化预览 */
@@ -302,6 +293,7 @@

      // 处理URL，替换域名部分
      this.fileUrl = this.processFileUrl(originalUrl);
      console.log(this.fileUrl,'this.fileUrl');

      this.fileType = this.getFileType(this.fileName);

@@ -312,6 +304,7 @@
      this.scale = 100;
      this.imageScale = 100;
      this.pageCount = 0;
      this.useNativePdf = false;

      // 模拟加载延迟
      setTimeout(() => {
@@ -360,8 +353,13 @@
    pdfErrorHandler(error) {
      console.error("PDF加载失败:", error);
      this.pdfLoading = false;
      this.$message.error("PDF文件加载失败，请尝试下载后查看");
      this.previewVisible = false;
      // pdf.js 通过 fetch 加载跨域 PDF 受 CORS 限制，失败时降级为浏览器原生预览
      // （iframe 属于导航请求，不受同源策略限制，可以正常加载跨域 PDF）
      this.useNativePdf = true;
      this.$message({
        type: "info",
        message: "已切换为浏览器原生预览模式"
      });
    },

    /** 图片加载完成 */
@@ -513,6 +511,13 @@
    align-items: flex-start;
  }

  /* 原生 PDF 预览（CORS 降级方案） */
  .pdf-native-iframe {
    flex: 1;
    border: none;
    background: #f8f9fa;
  }

  /* Office预览样式 */
  .office-content {
    flex: 1;