当前位置：首页 > VUE

vue实现各类文件预览

2026-01-23 03:53:49VUE

文件预览实现方案

在Vue中实现文件预览功能需要根据文件类型选择不同的技术方案。以下是常见文件类型的预览方法：

图片文件预览

使用HTML5的FileReader API读取图片文件并显示：

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

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0]
      if (file) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.imageUrl = e.target.result
        }
        reader.readAsDataURL(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(event) {
      const file = event.target.files[0]
      if (file) {
        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文档预览

使用微软Office Online预览服务：

vue实现各类文件预览

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

<script>
export default {
  props: {
    fileUrl: String
  }
}
</script>

视频/音频预览

使用HTML5媒体元素实现预览：

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

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

文本文件预览

使用FileReader读取文本内容：

vue实现各类文件预览

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

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

第三方服务集成

对于更复杂的预览需求，可以考虑集成第三方服务：

使用Google Docs Viewer

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

使用Box View API
```
npm install box-view
```

import BoxView from 'box-view'

const boxView = new BoxView({
  clientId: 'YOUR_CLIENT_ID',
  clientSecret: 'YOUR_CLIENT_SECRET'
})

// 上传文件获取预览URL
boxView.files.upload(file).then(response => {
  this.previewUrl = response.data.expiring_embed_link
})