文件（图片和pdf）预览的实现

1.文件预览的弹框

<el-dialog
      :visible="showPdf == true || showImg == true"
      :show-close="true"
      width="1000px"
      class="dialog-div-pre-style"
      :before-close="closePreviewClick"
      center
    >
     
      <div v-if="showPdf == true" style="justify-content: center; align-items: center">
        <iframe
          frameborder="0"
          :src="pdfUrl"
          width="100%"
          height="500px"
        />
      </div>
      <div
        v-else-if="showImg == true"
        class="dialog-body-content-base-style"
      >
        <img :src="imgUrl" alt="picture" class="show-img-box">
      </div>
    </el-dialog>

2.触发文件预览的方法：

  async previewPdf(row) {
      if (!row) return
      const fileParams = row.fileParams // 获取文件名
      fileParams.forEach(async(item, index) => {
        const fileDelivery = item.fileName.split('.')
        const type = fileDelivery[fileDelivery.length - 1] // 获取文件格式
        const fileId = item.fileId
        this.$store.dispatch('shareMaterial/getDownloadPath', fileId).then(res => {
          if (res.code === 0) {
            this.fileUrl = res.data
            if (type.indexOf('pdf') !== -1) {
              this.pdfUrl = this.fileUrl
              this.showPdf = true
            } else if (['jpg', 'png', 'jpeg', 'bmp', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp', 'avif', 'apng'].includes(type)) {
              this.imgUrl = this.fileUrl
              this.showImg = true
            } else {
              this.$message('当前文件暂不支持预览')
            }
          }
        })
      })

    // this.showPdf = true
    },

3.关闭文件预览的方法

   closePreviewClick() {
      if (this.showPdf === true) {
        this.showPdf = false
      } else if (this.showImg === true) {
        this.showImg = false
      }
    },