当前位置：首页 > VUE

vue网页预览功能实现

2026-01-22 17:35:39VUE

Vue 网页预览功能实现方法

方法一：使用 iframe 嵌入预览

在 Vue 组件中通过 iframe 标签加载目标网页，适用于简单预览场景。

<template>
  <div>
    <iframe :src="url" width="100%" height="500px"></iframe>
  </div>
</template>

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

方法二：动态路由预览

通过 Vue Router 配置动态路由，根据参数加载不同页面预览。

// router.js
{
  path: '/preview/:id',
  component: PreviewComponent
}

<!-- PreviewComponent.vue -->
<template>
  <div v-html="previewContent"></div>
</template>

<script>
export default {
  data() {
    return {
      previewContent: ''
    }
  },
  async created() {
    const id = this.$route.params.id
    this.previewContent = await fetchPreviewContent(id)
  }
}
</script>

方法三：PDF 文件预览

使用 pdf.js 等库实现 PDF 文件预览功能。

npm install pdfjs-dist

<template>
  <div ref="pdfViewer"></div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'

export default {
  methods: {
    async renderPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)
      const viewport = page.getViewport({ scale: 1.0 })

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

      await page.render({
        canvasContext: context,
        viewport: viewport
      }).promise

      this.$refs.pdfViewer.appendChild(canvas)
    }
  }
}
</script>

方法四：图片预览组件

实现图片上传后的预览功能。

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

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

方法五：Markdown 实时预览

结合 markdown 解析库实现编辑实时预览。

npm install marked

<template>
  <div>
    <textarea v-model="markdown"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script>
import marked from 'marked'
export default {
  data() {
    return {
      markdown: ''
    }
  },
  computed: {
    compiledMarkdown() {
      return marked(this.markdown)
    }
  }
}
</script>