vue项目中实现预览

实现文件预览功能

在Vue项目中实现文件预览功能，可以通过多种方式实现，具体取决于文件类型（如图片、PDF、Office文档等）。以下是几种常见实现方法：

图片预览

使用HTML5的FileReader API可以实现本地图片预览：

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

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    previewImage(event) {
      const file = event.target.files[0]
      if (file && file.type.match('image.*')) {
        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="application/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) return

      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预览服务：

<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>

通用文件预览方案

使用第三方库如vue-file-preview实现多种文件类型预览：

npm install vue-file-preview

使用示例：

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

<script>
import FilePreview from 'vue-file-preview'

export default {
  components: { FilePreview },
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0]
    }
  }
}
</script>

服务端文件预览

对于需要从服务端获取的文件，可以使用以下方法：

<template>
  <div>
    <button @click="previewServerFile">预览服务器文件</button>
    <iframe v-if="previewUrl" :src="previewUrl" width="100%" height="500px"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: ''
    }
  },
  methods: {
    async previewServerFile() {
      const response = await fetch('/api/get-file-url')
      const data = await response.json()
      this.previewUrl = data.fileUrl
    }
  }
}
</script>

以上方法可以根据项目需求选择适合的方案，组合使用可以覆盖大多数文件预览场景。对于更复杂的需求，可以考虑使用专业文档预览服务如Google Docs Viewer或专业SDK。