当前位置：首页 > VUE

vue实现预览pdf

2026-01-19 18:42:59VUE

使用 vue-pdf-embed 组件

安装依赖包：

npm install vue-pdf-embed

在组件中引入并使用：

vue实现预览pdf

<template>
  <vue-pdf-embed :source="pdfUrl" />
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed'

export default {
  components: {
    VuePdfEmbed
  },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf'
    }
  }
}
</script>

使用 pdf.js 原生方案

安装 pdf.js 库：

npm install pdfjs-dist

实现基础预览功能：

vue实现预览pdf

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
    <div>
      <button @click="prevPage">上一页</button>
      <span>第 {{ pageNum }} 页 / 共 {{ pageCount }} 页</span>
      <button @click="nextPage">下一页</button>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      pdfDoc: null,
      pageNum: 1,
      pageCount: 0,
      scale: 1.5
    }
  },
  mounted() {
    this.loadPDF('/path/to/document.pdf')
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      this.pdfDoc = await loadingTask.promise
      this.pageCount = this.pdfDoc.numPages
      this.renderPage(this.pageNum)
    },
    async renderPage(num) {
      const page = await this.pdfDoc.getPage(num)
      const viewport = page.getViewport({ scale: this.scale })
      const canvas = this.$refs.pdfCanvas
      const context = canvas.getContext('2d')

      canvas.height = viewport.height
      canvas.width = viewport.width

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      await page.render(renderContext).promise
    },
    prevPage() {
      if (this.pageNum <= 1) return
      this.pageNum--
      this.renderPage(this.pageNum)
    },
    nextPage() {
      if (this.pageNum >= this.pageCount) return
      this.pageNum++
      this.renderPage(this.pageNum)
    }
  }
}
</script>

使用 iframe 简单嵌入

适用于不需要复杂控制的场景：

<template>
  <iframe 
    :src="pdfUrl"
    width="100%"
    height="600px"
    style="border: none;"
  ></iframe>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: '/path/to/document.pdf'
    }
  }
}
</script>

使用第三方服务

对于需要在线预览的场景，可以考虑使用 Google Docs 预览：

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