当前位置：首页 > VUE

vue实现文件预览展示

2026-02-09 15:32:39VUE

文件预览实现方法

在Vue中实现文件预览功能，通常需要根据文件类型采用不同的处理方式。以下是几种常见文件类型的预览方案：

图片文件预览

使用HTML5的FileReader API读取本地文件并显示预览：

<template>
  <div>
    <input type="file" @change="previewImage" accept="image/*">
    <img v-if="imageUrl" :src="imageUrl" width="200">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: null
    }
  },
  methods: {
    previewImage(e) {
      const file = e.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (e) => {
        this.imageUrl = e.target.result
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

PDF文件预览

使用pdf.js库实现PDF预览：

npm install pdfjs-dist

<template>
  <div>
    <input type="file" @change="previewPDF" accept=".pdf">
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
  methods: {
    async previewPDF(e) {
      const file = e.target.files[0]
      if (!file) return

      const arrayBuffer = await file.arrayBuffer()
      const pdf = await pdfjsLib.getDocument(arrayBuffer).promise
      const page = await pdf.getPage(1)

      const viewport = page.getViewport({ scale: 1.0 })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')

      canvas.height = viewport.height
      canvas.width = viewport.width

      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise
    }
  }
}
</script>

Office文档预览

使用微软Office Online服务或第三方库：

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

<script>
export default {
  props: {
    fileUrl: String
  }
}
</script>

视频/音频预览

使用HTML5媒体元素实现多媒体预览：

<template>
  <div>
    <input type="file" @change="previewMedia" accept="video/*,audio/*">
    <video v-if="isVideo" :src="mediaUrl" controls width="400"></video>
    <audio v-else-if="isAudio" :src="mediaUrl" controls></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaUrl: null,
      isVideo: false,
      isAudio: false
    }
  },
  methods: {
    previewMedia(e) {
      const file = e.target.files[0]
      if (!file) return

      this.mediaUrl = URL.createObjectURL(file)
      this.isVideo = file.type.startsWith('video/')
      this.isAudio = file.type.startsWith('audio/')
    }
  }
}
</script>

通用文件预览方案

对于无法直接预览的文件类型，可以采用以下方案：

服务器端转换后返回可预览格式
使用Google Docs Viewer等在线服务
提供下载链接让用户自行查看

<template>
  <div>
    <input type="file" @change="handleFile">
    <a v-if="fileUrl" :href="fileUrl" target="_blank">下载查看</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileUrl: null
    }
  },
  methods: {
    handleFile(e) {
      const file = e.target.files[0]
      if (!file) return
      this.fileUrl = URL.createObjectURL(file)
    }
  }
}
</script>