当前位置：首页 > VUE

vue实现预览

2026-02-09 10:23:04VUE

Vue 实现文件预览的方法

使用 Vue 实现文件预览功能可以通过多种方式实现，具体取决于文件类型（图片、PDF、视频等）。以下是几种常见的实现方法：

图片预览

通过 input[type="file"] 获取用户上传的图片文件，使用 URL.createObjectURL 生成临时 URL 进行预览：

<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(event) {
      const file = event.target.files[0]
      if (file) {
        this.imageUrl = URL.createObjectURL(file)
      }
    }
  }
}
</script>

PDF 预览

使用 pdf.js 或 vue-pdf 库实现 PDF 文件预览：

安装 vue-pdf：

vue实现预览

npm install vue-pdf

实现代码：

<template>
  <div>
    <input type="file" @change="previewPdf" accept=".pdf">
    <pdf v-if="pdfUrl" :src="pdfUrl" style="width: 100%; height: 500px;"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: null
    }
  },
  methods: {
    previewPdf(event) {
      const file = event.target.files[0]
      if (file) {
        this.pdfUrl = URL.createObjectURL(file)
      }
    }
  }
}
</script>

Office 文档预览

使用微软 Office Online 的嵌入功能或第三方服务如 OnlyOffice 实现 Office 文档预览：

vue实现预览

<template>
  <div>
    <iframe 
      v-if="officeUrl"
      :src="'https://view.officeapps.live.com/op/embed.aspx?src=' + encodeURIComponent(officeUrl)"
      width="100%"
      height="500px"
      frameborder="0">
    </iframe>
  </div>
</template>

视频/音频预览

使用 HTML5 的 <video> 或 <audio> 标签实现媒体文件预览：

<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(event) {
      const file = event.target.files[0]
      if (file) {
        this.videoUrl = URL.createObjectURL(file)
      }
    }
  }
}
</script>

通用文件预览服务

对于不支持直接预览的文件类型，可以使用第三方预览服务如 Google Docs Viewer：

<template>
  <div>
    <iframe 
      v-if="fileUrl"
      :src="'https://docs.google.com/viewer?url=' + encodeURIComponent(fileUrl) + '&embedded=true'"
      width="100%"
      height="500px"
      frameborder="0">
    </iframe>
  </div>
</template>

注意事项：