vue实现预览功能

Vue 实现文件预览功能

图片预览

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

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

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  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
      const context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width

      page.render({
        canvasContext: context,
        viewport: viewport
      })
    }
  }
}
</script>

Office 文档预览

使用微软 Office Online 预览服务：

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

<script>
export default {
  data() {
    return {
      fileUrl: 'https://example.com/document.docx'
    }
  }
}
</script>

视频/音频预览

HTML5 原生媒体元素实现：

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

<script>
export default {
  data() {
    return {
      mediaUrl: '',
      isVideo: false
    }
  },
  methods: {
    previewMedia(e) {
      const file = e.target.files[0]
      this.isVideo = file.type.includes('video')
      this.mediaUrl = URL.createObjectURL(file)
    }
  }
}
</script>

通用文件预览方案

对于无法直接预览的文件类型，可提供下载按钮：

<template>
  <div>
    <input type="file" @change="handleFile">
    <a v-if="fileUrl" :href="fileUrl" download>下载文件</a>
  </div>
</template>

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

注意事项

1. 使用 URL.createObjectURL 后需要手动释放内存：

   

   // 组件销毁时
   beforeDestroy() {
     if (this.imageUrl) {
       URL.revokeObjectURL(this.imageUrl)
     }
   }

2. 大文件处理应考虑使用分片读取或限制文件大小

3. 跨域文件预览需要服务端支持 CORS

4. 移动端可能需要额外处理文件选择和预览的兼容性问题