vue如何实现预览

实现文件预览功能

在Vue中实现文件预览功能通常涉及前端文件处理和第三方库的集成。根据文件类型（如图片、PDF、视频等），方法有所不同。

图片预览 使用URL.createObjectURL或FileReader实现本地图片预览：

<template>
  <input type="file" @change="previewImage" accept="image/*">
  <img v-if="imageUrl" :src="imageUrl" alt="Preview">
</template>

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

PDF文档预览

对于PDF文件，可以使用pdf.js或第三方组件库：

npm install vue-pdf

<template>
  <pdf :src="pdfUrl" style="width: 100%; height: 500px"></pdf>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: { pdf },
  data() {
    return { pdfUrl: '/sample.pdf' }
  }
}
</script>

视频/音频预览

媒体文件可直接通过HTML5的<video>或<audio>标签预览：

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

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

Office文档预览

对于Word/Excel等文档，推荐使用微软官方预览服务或第三方API：

<iframe 
  :src="`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(docUrl)}`"
  width="100%" 
  height="500px"
></iframe>

云端文件预览

若文件存储在云端，可使用Google Viewer等公共服务：

<iframe 
  :src="`https://docs.google.com/viewer?url=${encodeURIComponent(fileUrl)}&embedded=true`"
  style="width:100%; height:500px;"
></iframe>

注意事项

• 使用URL.createObjectURL后需手动释放内存：URL.revokeObjectURL(url)
• 大文件建议分片处理或使用服务端转码
• 敏感文件需考虑权限控制和预览水印
• 移动端需注意不同浏览器的兼容性问题