smart_archives_web/src/views/viewFile/viewFile.vue

<template>
  <!-- 预览文件 -->
    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
    <div style="text-align:center">
      <!-- 图片预览 -->
      <template v-if="isImage">
        <el-image :src="processedFileUrl" :preview-src-list="previewList" fit="contain" style="max-width:100%;max-height:70vh">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </template>

      <!-- PDF 预览 -->
      <template v-else>
        <pdf :src="processedFileUrl" style="width:100%;height:70vh" />
      </template>
        </div>
    </el-dialog>
</template>
<script>
import pdf from 'vue-pdf'
import { getFileAsBase64Api } from '@/api/archivesManagement/fileManager/fileManager'
export default {
    name: 'ViewFile',
  props: ['width', 'hight', 'dataForm', 'title', 'disabled', 'isAdd', 'rowData', 'projectId'],
  components: { pdf },
    data() {
        return {
      dialogVisible: true,
            lDialog: this.width > 500 ? "w700" : "w500",
      fileUrl: '',           // 实际文件地址
      fileName: '',          // 用于从文件名判断类型
      previewList: []        // 预览组（可只放当前图片）
    }
  },
  computed: {
    isImage() {
      // 允许的图片类型
      const exts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
      const url = (this.fileUrl || '')
      const name = (this.fileName || '').toLowerCase()
      return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
    },
    isPdf() {
      // 判断是否为PDF文件
      const exts = ['.pdf']
      const url = (this.fileUrl || '')
      const name = (this.fileName || '').toLowerCase()
      return exts.some(ext => url.endsWith(ext) || name.endsWith(ext))
    },
    processedFileUrl() {
      // 处理文件URL，为PDF添加data前缀
      if (this.isPdf && this.fileUrl && !this.fileUrl.startsWith('data:')) {
        return `data:application/pdf;base64,${this.fileUrl}`
      }
      return this.fileUrl
    }
  },
  created() {
    this.getFileAsBase64();

  },
    methods: {
        handleClose() {
      this.dialogVisible = false
      this.$emit('closeDialog')
    },
    /* 获取文件的base64 */
    getFileAsBase64() {
      getFileAsBase64Api({ id: this.rowData.fileId }).then(res => {
        const obj =res.data;
        this.fileUrl = obj?.fileBase64 || ''
        this.fileName = obj?.fileName || ''
        // 预览组（如果你有多张，可放数组；没有就放当前一张）
        if (this.isImage && this.fileUrl) {
          this.previewList = [this.processedFileUrl]
        }
      })
    }
  },
}
</script>
<style lang="scss">
.w700 .el-dialog {
    width: 700px;
}

.w500 .el-dialog {
    width: 500px;
}

.w500 .el-dialog__header,
.w700 .el-dialog__header {
    // background: #eeeeee;

    .el-dialog__title {
        font-size: 16px;
    }
}

.yxq .el-range-separator {
    margin-right: 7px !important;
}

.el-date-editor--daterange.el-input__inner {
    width: 260px;
}

.form-item {
    width: 100%;
}

.select-style {
    display: flex;
    justify-content: space-between;
}

.image-slot {
  width: 100%;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 24px;
}
</style>