vue实现文件预览

2026-01-16 05:12:36VUE

Vue 实现文件预览的方法

文件预览功能通常涉及图片、PDF、Office文档等多种格式的处理。以下是几种常见文件类型的实现方案：

图片预览

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

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

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

PDF 预览

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

安装依赖：

npm install pdfjs-dist

组件实现：

<template>
  <div>
    <input type="file" @change="previewPdf" accept="application/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 文档预览

使用微软官方预览服务或第三方库：

<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: String
  }
}
</script>

视频/音频预览

使用HTML5原生媒体元素：

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

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