vue实现预览功能

2026-02-17 13:54:48VUE

Vue 实现文件预览功能

图片预览
使用 <input type="file"> 结合 URL.createObjectURL() 实现本地图片预览：

vue实现预览功能

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

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

PDF预览
通过 pdf.js 库实现PDF文件预览：

vue实现预览功能

// 安装依赖
npm install pdfjs-dist

// 组件实现
<template>
  <div>
    <input type="file" @change="handlePdfPreview" accept="application/pdf">
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
  methods: {
    async handlePdfPreview(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']
}
</script>

视频/音频预览
HTML5原生媒体元素实现：

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

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

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