vue实现预览效果

2026-01-15 01:46:11VUE

实现预览效果的常见方法

在Vue中实现预览效果可以通过多种方式完成，以下列举几种典型场景和对应的实现方案：

图片/文件预览

使用<input type="file">结合FileReader实现本地文件预览：

<template>
  <input type="file" @change="previewFile">
  <img v-if="previewUrl" :src="previewUrl" width="200">
</template>

<script>
export default {
  data() {
    return { previewUrl: '' }
  },
  methods: {
    previewFile(e) {
      const file = e.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (e) => {
        this.previewUrl = e.target.result
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>

富文本内容预览

使用v-html指令渲染富文本内容时需注意XSS防护：

<template>
  <div v-html="sanitizedContent"></div>
</template>

<script>
import DOMPurify from 'dompurify'
export default {
  data() {
    return { rawContent: '<p>Preview content</p>' }
  },
  computed: {
    sanitizedContent() {
      return DOMPurify.sanitize(this.rawContent)
    }
  }
}
</script>

弹窗式预览

结合Element UI等库实现模态框预览：

<template>
  <el-button @click="dialogVisible = true">预览</el-button>
  <el-dialog :visible.sync="dialogVisible">
    <img :src="previewImage" style="max-width:100%">
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      previewImage: '/sample.jpg'
    }
  }
}
</script>

PDF预览

使用pdf.js库实现PDF文档预览：

<template>
  <div ref="pdfContainer"></div>
  <input type="file" @change="loadPDF">
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
  methods: {
    async loadPDF(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 = document.createElement('canvas')
      this.$refs.pdfContainer.appendChild(canvas)

      const context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width

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

实时表单预览

通过计算属性实现表单输入的实时预览：

<template>
  <input v-model="title" placeholder="输入标题">
  <textarea v-model="content" placeholder="输入内容"></textarea>

  <div class="preview">
    <h3>{{ previewTitle }}</h3>
    <p>{{ previewContent }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: ''
    }
  },
  computed: {
    previewTitle() {
      return this.title || '默认标题'
    },
    previewContent() {
      return this.content || '输入内容将实时显示在这里'
    }
  }
}
</script>

每种实现方式都需要根据具体业务场景进行调整，特别是涉及用户上传内容时需要考虑安全性和性能优化。对于复杂预览场景，建议使用专门的预览库如viewer.js（图片）、PDF.js（文档）等专业解决方案。

vue实现预览效果