vue前端实现文件预览

2026-01-20 07:11:52VUE

Vue 前端实现文件预览的方法

图片预览

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

<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]
      this.imageUrl = URL.createObjectURL(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]
      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
      canvas.height = viewport.height
      canvas.width = viewport.width
      await page.render({
        canvasContext: canvas.getContext('2d'),
        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>

视频/音频预览

HTML5 原生媒体元素实现：

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

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

文本文件预览

使用 <textarea> 或 <pre> 标签显示文本内容：

<template>
  <div>
    <input type="file" @change="previewText" accept=".txt,.json,.xml,.csv">
    <pre v-if="textContent">{{ textContent }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textContent: null
    }
  },
  methods: {
    previewText(e) {
      const file = e.target.files[0]
      const reader = new FileReader()
      reader.onload = (event) => {
        this.textContent = event.target.result
      }
      reader.readAsText(file)
    }
  }
}
</script>

第三方库集成

使用 vue-file-preview 等现成组件：

npm install vue-file-preview

基本用法：

<template>
  <vue-file-preview :file="file"></vue-file-preview>
</template>

<script>
import VueFilePreview from 'vue-file-preview'
export default {
  components: { VueFilePreview },
  data() {
    return {
      file: null
    }
  }
}
</script>

注意事项：