vue实现文件预览展示

Vue 实现文件预览展示的方法

使用第三方库预览常见文件类型

对于常见的文件类型（如 PDF、图片、视频等），可以使用现成的 Vue 组件库来实现预览功能。

• PDF 预览：使用 vue-pdf 或 pdfvuer 库

  // 安装依赖
  npm install vue-pdf
  
  // 组件中使用
  <template>
    <pdf :src="pdfUrl"></pdf>
  </template>
  
  <script>
  import pdf from 'vue-pdf'
  export default {
    components: { pdf },
    data() {
      return {
        pdfUrl: '/path/to/file.pdf'
      }
    }
  }
  </script>

• 图片预览：使用 viewerjs 或 vue-easy-lightbox

  

  // vue-easy-lightbox 示例
  <template>
    <button @click="showLightbox">预览图片</button>
    <vue-easy-lightbox :visible="visible" :imgs="imgs" @hide="handleHide"></vue-easy-lightbox>
  </template>
  
  <script>
  import VueEasyLightbox from 'vue-easy-lightbox'
  export default {
    components: { VueEasyLightbox },
    data() {
      return {
        visible: false,
        imgs: ['/path/to/image.jpg']
      }
    },
    methods: {
      showLightbox() { this.visible = true },
      handleHide() { this.visible = false }
    }
  }
  </script>

使用浏览器原生能力预览文件

对于不需要特殊处理的文件类型，可以直接使用浏览器原生能力打开文件。

<template>
  <div>
    <a :href="fileUrl" target="_blank">预览文件</a>
    <!-- 或者 -->
    <iframe :src="fileUrl" width="100%" height="500px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: '/path/to/file.docx'
    }
  }
}
</script>

实现 Office 文件预览

对于 Word、Excel、PPT 等 Office 文件，可以使用微软的 Office Online 服务。

<template>
  <iframe 
    width="100%" 
    height="500px"
    :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`">
  </iframe>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: 'https://your-domain.com/path/to/file.docx'
    }
  }
}
</script>

自定义文件预览组件

对于需要完全自定义的预览需求，可以创建一个文件预览组件，根据文件类型显示不同的预览方式。

<template>
  <div class="file-preview">
    <!-- PDF -->
    <pdf-viewer v-if="fileType === 'pdf'" :file="file" />

    <!-- 图片 -->
    <image-viewer v-else-if="isImage" :file="file" />

    <!-- 视频 -->
    <video-player v-else-if="fileType === 'video'" :file="file" />

    <!-- 默认下载 -->
    <div v-else>
      <p>不支持预览，请下载后查看</p>
      <a :href="fileUrl" download>下载文件</a>
    </div>
  </div>
</template>

<script>
export default {
  props: ['file'],
  computed: {
    fileType() {
      const ext = this.file.name.split('.').pop().toLowerCase()
      if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) return 'image'
      if (['pdf'].includes(ext)) return 'pdf'
      if (['mp4', 'webm', 'ogg'].includes(ext)) return 'video'
      return 'other'
    },
    isImage() {
      return this.fileType === 'image'
    },
    fileUrl() {
      return URL.createObjectURL(this.file)
    }
  }
}
</script>

文件上传时预览

在上传文件前实现预览功能，可以使用 FileReader API。

<template>
  <div>
    <input type="file" @change="previewFile" />
    <!-- 图片预览 -->
    <img v-if="previewUrl && isImage" :src="previewUrl" />
    <!-- PDF 预览 -->
    <embed v-else-if="previewUrl && isPdf" :src="previewUrl" type="application/pdf" width="100%" height="500px" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: null,
      fileType: null
    }
  },
  methods: {
    previewFile(event) {
      const file = event.target.files[0]
      if (!file) return

      this.fileType = file.type
      const reader = new FileReader()

      reader.onload = (e) => {
        this.previewUrl = e.target.result
      }

      reader.readAsDataURL(file)
    }
  },
  computed: {
    isImage() {
      return this.fileType.startsWith('image/')
    },
    isPdf() {
      return this.fileType === 'application/pdf'
    }
  }
}
</script>

以上方法涵盖了常见的文件预览需求，可以根据实际项目需求选择合适的实现方式。对于更复杂的预览需求，可能需要结合后端服务或专门的文档预览服务来实现。