军泰 1.产品维护上传修改

gaoluyang

2026-04-07 62e9986b6d2d20e61a3b65745af33165c9f1534b

 src/components/filePreview/index.vue

@@ -6,9 +6,9 @@
        <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>
      <!-- PDF预览 -->
      <div v-if="isPdf" class="pdf-preview-wrapper">
        <iframe :src="fileUrl" class="pdf-preview-frame" frameborder="0"></iframe>
      </div>
      
      <!-- Word文档预览 -->
@@ -53,7 +53,7 @@
</template>

<script setup>
import { ref, computed, getCurrentInstance, watch } from 'vue';
import { ref, computed, getCurrentInstance } from 'vue';
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';
import VueOfficeExcel from '@vue-office/excel';
@@ -112,45 +112,6 @@
  return isImage.value || isPdf.value || isDoc.value || isXls.value || isZipOrRar.value;
});

// 动态创建a标签并跳转预览PDF
const previewPdf = (url) => {
  // 创建a标签
  const link = document.createElement('a');
  // 设置PDF文件URL
  link.href = url;
  // 在新标签页打开
  link.target = '_blank';
  // 安全属性，防止新页面访问原页面
  link.rel = 'noopener noreferrer';
  // 可选：设置链接文本
  link.textContent = '预览PDF';
  // 将a标签添加到页面（部分浏览器要求必须在DOM中）
  document.body.appendChild(link);
  // 触发点击事件
  link.click();
  // 移除a标签，清理DOM
  document.body.removeChild(link);
};


// 监听PDF状态变化，自动触发跳转
watch(
  () => isPdf.value,
  (newVal) => {

    // 当确认是PDF且文件URL有效时
    if (newVal && fileUrl.value) {
      // 关闭对话框
      dialogVisible.value = false;
      // 加个小延迟确保状态更新完成
      setTimeout(() => {
        previewPdf(fileUrl.value);
        fileUrl.value = '';
      }, 100);
    }
  }
);

// 方法定义
const renderedHandler = () => {
  console.log("渲染完成");
@@ -194,6 +155,15 @@
  margin: 0 auto;
}

.pdf-preview-wrapper {
  height: 100vh;
}

.pdf-preview-frame {
  width: 100%;
  height: 100%;
}

.oneLine {
  overflow: hidden;
  white-space: nowrap;