图片和PDF展示预览、并支持下载

需求

展示图片和PDF类型，并且点击图片或者PDF可以预览

第一步：遍历所有的图片和PDF列表

<div v-for="(data,index) in parerFont(item.fileInfo)" :key="index" class="data-list-item">
       <downloadCard :file-info="data" />
</div>

第二步：编写downloadcard组件

<template>
  <div class="download-card">
    <!-- 图片与PDF格式 -->
    <file-preview v-if="isImageOrPDF(fileInfo.url)" :url="fileInfo.url" :name="fileInfo.name" />
    <!-- ZIP XSLS WAP 等格式 -->
    <div v-else class="other-type">
      <div><d2-icon-svg name="transaction" class="iconrefresh" /></div>
      <div class="file-name-other">{{ fileInfo.name }}</div>
    </div>
    <div @click="donwload(fileInfo.url, fileInfo.name)">
      <d2-icon name="import" class="iconimport" />
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import FilePreview from '@/components/file-preview';
export default {
  name: 'downloadCard',
  components: {
    FilePreview
  },
  props: {
    fileInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
    };
  },
  created() {
  },
  methods: {
    justPDF(str) {
      var strRegex = '(.pdf)$'; // 用于验证后缀是否是pdf
      var reg = new RegExp(strRegex);
      if (reg.test(str.toLowerCase())) {
        // console.log('是pdf')
        return true;
      } else {
        // console.log('不是pdf')
        return false;
      }
    },
    isImageOrPDF(filename) {
      // 获取文件的扩展名
      const extension = filename.split('.').pop().toLowerCase();
      // 常见的图片和 PDF 文件扩展名
      const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
      const pdfExtensions = ['pdf'];
      // 检查文件扩展名是否在常见图片或 PDF 扩展名列表中
      return imageExtensions.includes(extension) || pdfExtensions.includes(extension);
    },
    donwload(fileUrl, fileName = '') {
      axios({
        method: 'get',
        url: fileUrl,
        responseType: 'blob',
      }).then((response) => {
        const link = document.createElement('a');
        const blob = new Blob([response.data], { type: response.data.type });
        const urlRef = window.URL.createObjectURL(blob);
        link.href = urlRef;
        link.download = fileName;
        link.click();
        window.URL.revokeObjectURL(urlRef);
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.download-card{
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(234, 234, 234, 1);
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  width: 235px;
  justify-content: space-between;
  color: rgba(114, 120, 128, 1);
  .file-name{
    width: 136px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
  }
  .file-name-other{
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    margin-left: 5px;
  }
  .type-img{
    display: flex;
  }
  .type-pdf{
    display: flex;
  }
  .iconrefresh, .iconimport{
    width: 24px !important;
    height: 24px !important;
  }
  .other-type{
    display: flex;
    align-items: center;
    cursor: default;
  }
}
</style>

 第三步：编写FilePreview实现图片和PDF预览组件

<template>
  <div class="preview-wrap">
    <!-- PDF和图片类型点击 -->
    <div v-if="justPDF(url)" class="type-pdf" @click="previewFile(url)">
      <div><d2-icon-svg name="transaction" class="iconrefresh" /></div>
      <div class="file-name-pdf">{{ name }}</div>
    </div>
    <div v-else class="type-img" @click="previewFile(url)">
      <div>
        <img :src="url" class="type-img-preview" alt="">
      </div>
      <div class="file-name">{{ name }}</div>
      <div class="hover-pick">
        <img src="../../../public/image/merchant/Magnifying_glass.png" class="type-img-innner" alt="">
      </div>
    </div>
    <!-- PDF预览 -->
    <template v-if="pdfContainerVisible">
      <div id="pdf-container" />
      <div class="pdf-close" @click="pdfContainerVisible = false">
        <i class="el-icon-close" />
      </div>
    </template>
    <!-- 图片预览 -->
    <viewer
      v-else
      :options="{'toolbar': false, 'navbar': false, 'title': false}"
      :images="[url]"
      @inited="imagePreviewInited">
      <template slot-scope="scope">
        <img v-for="(src, index) in scope.images" :src="src" :key="index" style="display:none;">
      </template>
    </viewer>
  </div>
</template>

<script>
import Viewer from 'v-viewer/src/component.vue';
import 'viewerjs/dist/viewer.css';
// import MagnifyingGlass from '../../../public/image/merchant/Magnifying_glass.png';

import local from './local';

const SCOPE_NAME = 'siPreview';

export default {
  name: SCOPE_NAME,
  components: {
    Viewer,
  },
  inheritAttrs: false,
  props: {
    url: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '',
    },
    isImageBase64: false,
  },
  data() {
    return {
      pdfContainerVisible: false,
    };
  },
  created() {
    if (!this.$i18n.getLocaleMessage('en')[SCOPE_NAME]) {
      this.$i18n.mergeLocaleMessage('en', local.en);
      this.$i18n.mergeLocaleMessage('cn', local.cn);
    }
  },
  methods: {
    justPDF(str) {
      var strRegex = '(.pdf)$'; // 用于验证后缀是否是pdf
      var reg = new RegExp(strRegex);
      if (reg.test(str.toLowerCase())) {
        // console.log('是pdf')
        return true;
      } else {
        // console.log('不是pdf')
        return false;
      }
    },
    // 文件预览
    previewFile(fileUrl) {
      const fileExtension = fileUrl.split('.').pop();
      const isPdf = fileExtension.toLowerCase().startsWith('pdf');
      const isImg = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].find(suffix => fileExtension.toLowerCase().startsWith(suffix));
      if (isPdf) {
        this.pdfPreview(fileUrl);
      } else if (isImg || this.isImageBase64) {
        this.imagePreview();
      } else {
        window.open(fileUrl);
      }
    },
    // 图片预览
    imagePreview() {
      this.$viewer.show();
    },
    imagePreviewInited(viewer) {
      this.$viewer = viewer;
    },
    // PDG预览
    pdfPreview(fileUrl) {
      this.pdfContainerVisible = true;
      this.$nextTick(() => {
        let url = '';
        if (fileUrl.startsWith('http://')) {
          url = fileUrl.substring(5);
        } else if (fileUrl.startsWith('https://')) {
          url = fileUrl.substring(6);
        } else {
          url = fileUrl;
        }
        // eslint-disable-next-line no-undef
        PDFObject.embed(url, '#pdf-container', {
          width: '80%'
        });
      });
    }
  },
};
</script>

<style lang="scss" scoped>
  .preview-wrap {
    display: inline-block;
    width: 224px;
    // background: red;
    height: 30px;
    margin-right: 5px;
  }
  .preview-button {
    padding: 0;
  }
  #pdf-container {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .pdf-close {
    position: fixed;
    z-index: 10001;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 40px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
  }
  .file-name{
    width: 136px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    margin-left: 5px;
  }
  .file-name-pdf{
    width: 156px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    margin-left: 5px;
  }
  .hover-pick{
    position: absolute;
    top: 0;
    background: #000;
    margin-top: -6px;
    border-radius: 8px;
    width: 42px;
    height: 42px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 0.5;
    visibility: hidden;
  }
  .type-img{
    display: flex;
    height: 30px;
    align-items: center;
    position: relative;
    .type-img-preview{
      height: 40px;
      width:40px;
      object-fit: cover;
      margin-right: 5px;
      margin-top: 3px;
      border-radius: 8px;
      border: 1px solid #EAEAEA;
    }
    .type-img-innner{
      height: 15px;
      width:15px;
      z-index: 2;
    }
    &:hover{
      .hover-pick{
        visibility:visible;
      }
    }
  }
  .type-pdf{
    display: flex;
    height: 30px;
    align-items: center;
  }
  .iconrefresh{
    width: 24px !important;
    height: 24px !important;
  }
</style>