'feat上传附件及预览文件'

zhangwei

2025-08-27 f0c7f4845fb40bb75b2c9eb61a790e9b8ea7401a

 src/views/system/component/pdfPreview.vue

@@ -6,7 +6,6 @@
  >
    <iframe
      id="printIframe"
      :src="pdfSrc"
      frameborder="0"
      style="width: 100%; height: 100%"
      @load="iframeLoaded"
@@ -16,10 +15,14 @@

<script setup lang="ts">
import { ref, defineProps } from "vue";
defineProps({
  pdfSrc: {
    type: String,
    default: ""
const props = defineProps({
  // fileInfo: {
  //   type: String,
  //   default: ""
  // }
  fileInfo: {
    type: Object,
    required: true
  }
});
let isLoading = ref(true);
@@ -28,6 +31,31 @@

  isLoading.value = false;
};
console.log(props.fileInfo, "props.fileInfo");

const pdfUrl = props.fileInfo.filePath;
// 用fetch获取文件流，强制转为预览格式
fetch(pdfUrl)
  .then(response => {
    // 检查响应是否成功
    if (!response.ok) throw new Error("文件获取失败");
    // 强制获取Blob对象（指定PDF类型）
    return response.blob();
  })
  .then(blob => {
    // 生成临时预览URL（浏览器本地临时链接，无下载触发）
    const blobUrl = URL.createObjectURL(
      new Blob([blob], { type: "application/pdf" }) // 明确指定PDF类型
    );
    // 赋值给iframe并显示
    const iframe = document.getElementById("printIframe");
    iframe.src = blobUrl;
    iframe.style.display = "block";
    document.getElementById("loading").style.display = "none";
  })
  .catch(error => {
    // document.getElementById("loading").innerText = `加载失败：${error.message}`;
  });
</script>
<style>
.pdf-container {