当前位置：首页 > VUE

vue 实现pdf查看

2026-01-17 16:16:39VUE

实现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是一个专门为Vue开发的PDF查看器组件。

安装：

npm install vue-pdf

使用示例：

<template>
  <pdf :src="pdfUrl"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf'
    }
  }
}
</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 Viewer等在线服务：

vue 实现pdf查看

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