vue2 - 文件预览、下载

目标：显示附件文件名，多个文件则用顿号隔开，点击文件可预览或下载文件

• 支持预览 pdf 和图片 （'JPG', 'JPEG', 'PNG'）
• doc、docx文件支持下载

原型图：

实现：

1、附件信息实现：

<!-- 附件信息 -->
      <template v-if="fileInfo.data.length">
        <div class="table-panel-header" style="margin: 20px 0 15px;">附件信息</div>
        <el-descriptions
          border
          :column="2"
        >
        <el-descriptions-item
          :label-style="{ width: '200px'}"
          v-for="(item,index) in fileInfo.data"
          :key="index"
          :label="item.name"
          >
          <div v-for="(file, index2) in item.value" :key="index2">
            <el-button type="text" size="mini" @click="checkFile(file)">
              {{file.fileName}}
            </el-button>
            <span v-if="index2 !== item.value.length - 1">、</span>
          </div>
          </el-descriptions-item>
        </el-descriptions>
      </template>

<!-- 附件信息-文件预览 -->
    <el-dialog :visible.sync="fileDialog.visible" title="附件预览"  width="1000px" append-to-body>
      <div v-loading="fileDialog.loading">
        <span v-if="!fileDialog.isShowPng">文件暂不支持预览，请下载后查看：</span>
        <el-button :loading="fileDialog.btnLoading" type="primary" size="small" @click="DownloadAttachments" style="margin-bottom: 10px">下载附件</el-button>
      </div>
      <template v-if="fileDialog.isShowPng">
        <el-image v-if="fileDialog.isPic" :src="fileDialog.url" width="100%" />
        <iframe v-else style="width:100%;height:300px" :src="fileDialog.url + '#toolbar=0'" frameborder="0" />
      </template>
    </el-dialog>

import { getEnumByTypes, downloadFastdfs, downloadBase64Fastdfs } from '@/api/common'
import { downFileFn } from '@/utils/downFiles'

checkFile(file) {
      if (!file || !file.fileUrl || !file.fileName) {
        console.error('Invalid file object:', file);
        return;
      }
      this.fileDialog.visible = true
      this.fileDialog.fileUrl = file.fileUrl
      this.fileDialog.fileName = file.fileName
      const parts = file.fileUrl.split('.');
      if (parts.length > 1) {
        const type = parts[parts.length - 1];
        this.fileDialog.isPic = ['JPG', 'JPEG', 'PNG'].includes(type.toLocaleUpperCase());
        this.fileDialog.isShowPng = !['DOC', 'DOCX'].includes(type.toLocaleUpperCase());
      } else {
        console.error('Invalid file URL:', file.fileUrl);
        return;
      }
      // const type = file.fileUrl.split('.')[1]
      // this.fileDialog.isPic = ['JPG', 'JPEG', 'PNG'].includes(type.toLocaleUpperCase())
      // this.fileDialog.isShowPng = !['DOC', 'DOCX'].includes(type.toLocaleUpperCase())
      if(this.fileDialog.isShowPng) {
        this.fileDialog.loading = true
        downloadBase64Fastdfs({url: file.fileUrl}).then(res => {
          this.fileDialog.url = 'data:image/png;base64,' + res.data.body
          if(!this.fileDialog.isPic) {
            this.fileDialog.url = this.PdfConvertFile(res.data.body)
          }
        }).finally(_ => {
          this.fileDialog.loading = false
        })
      }
    },
    // 下载附件
    DownloadAttachments() {
      this.fileDialog.btnLoading = true
      downloadFastdfs({url: this.fileDialog.fileUrl}).then(res => {
        downFileFn(res,this.fileDialog.fileName)
      }).finally(_ => {
        this.fileDialog.btnLoading = false
      })
    },

效果：

预览：

下载：

2、其他信息实现：

<!-- 其他信息 -->
      <template v-if="otherInfo.data.length > 0">
        <div class="table-panel-header" style="margin: 20px 0 15px;">其它信息</div>
        <el-descriptions
          border
          :column="2"
        >
         <el-descriptions-item
            :label-style="{ width: '200px'}"
            v-for="(item,index) in otherInfo.data"
            :key="index"
            :label="item.name "
          >{{ item.value || '-' }}</el-descriptions-item>
        </el-descriptions>
      </template>
      <div v-else class="contentBox">
        <img src="@/assets/trainFee/no_data.png" alt="" style="display: block; margin: 0 auto; padding: 40px 0 0;">
        <div style="text-align: center; padding: 20px 0; letter-spacing: 1px; font-size: 14px; font-weight: bold;">暂无其他信息</div>
      </div>

效果：