当前位置：首页 > VUE

vue实现预览功能

2026-01-16 21:21:25VUE

Vue 实现文件预览功能

使用 FileReader 实现本地文件预览

通过 HTML5 的 FileReader API 可以读取本地文件内容并显示预览。创建一个文件上传组件，监听 change 事件获取文件对象。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <div v-if="previewContent">
      <h3>预览内容：</h3>
      <pre>{{ previewContent }}</pre>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewContent: ''
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      if (!file) return

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

实现图片预览

对于图片文件，可以使用 URL.createObjectURL 生成临时 URL 进行预览。

<template>
  <div>
    <input type="file" accept="image/*" @change="handleImageChange" />
    <img v-if="imageUrl" :src="imageUrl" style="max-width: 300px" />
  </div>
</template>

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

      this.imageUrl = URL.createObjectURL(file)
    }
  }
}
</script>

PDF 文件预览

vue实现预览功能

使用第三方库如 pdf.js 可以实现 PDF 文件的预览功能。

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

<script>
import * as pdfjsLib from 'pdfjs-dist'

export default {
  methods: {
    async handlePdfChange(event) {
      const file = event.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 预览服务可以实现 Word、Excel 等文档的在线预览。

vue实现预览功能

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

<script>
export default {
  props: {
    fileUrl: {
      type: String,
      required: true
    }
  }
}
</script>

视频和音频预览

HTML5 的 video 和 audio 标签可以直接播放媒体文件。

<template>
  <div>
    <input type="file" accept="video/*" @change="handleVideoChange" />
    <video v-if="videoUrl" :src="videoUrl" controls style="max-width: 500px"></video>

    <input type="file" accept="audio/*" @change="handleAudioChange" />
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: '',
      audioUrl: ''
    }
  },
  methods: {
    handleVideoChange(event) {
      const file = event.target.files[0]
      if (!file) return
      this.videoUrl = URL.createObjectURL(file)
    },
    handleAudioChange(event) {
      const file = event.target.files[0]
      if (!file) return
      this.audioUrl = URL.createObjectURL(file)
    }
  }
}
</script>

注意事项