当前位置：首页 > VUE

vue之实现pdf预览

2026-02-23 12:31:01VUE

vue实现PDF预览的方法

在Vue项目中实现PDF预览功能，可以通过以下几种方式完成。每种方法适用于不同场景，可根据项目需求选择。

使用pdf.js库

pdf.js是Mozilla开源的PDF渲染库，无需依赖第三方服务，适合纯前端实现。

安装依赖：

npm install pdfjs-dist

组件中使用：

<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>

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

export default {
  props: ['pdfUrl'],
  mounted() {
    this.renderPDF()
  },
  methods: {
    async renderPDF() {
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
      const pdf = await loadingTask.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

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      page.render(renderContext)
    }
  }
}
</script>

使用vue-pdf组件

vue-pdf是对pdf.js的封装，使用更简单。

安装依赖：

npm install vue-pdf

组件中使用：

<template>
  <pdf :src="pdfUrl" @num-pages="pageCount = $event" @page-loaded="currentPage = $event"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: 'document.pdf',
      pageCount: 0,
      currentPage: 0
    }
  }
}
</script>

使用iframe嵌入

最简单的方法，但样式和功能控制有限。

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

<script>
export default {
  props: ['pdfUrl']
}
</script>

使用Google Docs Viewer（需联网）

通过Google的在线服务渲染PDF，适合临时解决方案。

<template>
  <iframe 
    :src="'https://docs.google.com/viewer?url=' + encodeURIComponent(pdfUrl) + '&embedded=true'"
    width="100%"
    height="600px">
  </iframe>
</template>

使用PDFObject库

PDFObject可以智能选择最佳渲染方式。

安装依赖：

npm install pdfobject

组件中使用：

vue之实现pdf预览

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

<script>
import PDFObject from 'pdfobject'

export default {
  props: ['pdfUrl'],
  mounted() {
    PDFObject.embed(this.pdfUrl, this.$refs.pdfContainer)
  }
}
</script>