当前位置：首页 > VUE

vue实现pdf预览

2026-01-08 16:52:40VUE

使用 vue-pdf 库实现 PDF 预览

安装 vue-pdf 库：

npm install vue-pdf

在 Vue 组件中引入并使用：

<template>
  <div>
    <pdf :src="pdfUrl" style="width: 100%; height: 800px;"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl: '/path/to/your/file.pdf' // 可以是本地路径或远程URL
    }
  }
}
</script>

使用 PDF.js 实现更灵活的预览

安装 pdfjs-dist：

npm install pdfjs-dist

实现基础预览功能：

<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/your/file.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 实现简单预览

对于简单的需求，可以直接使用 iframe：

<template>
  <iframe 
    :src="pdfUrl"
    style="width: 100%; height: 800px;"
    frameborder="0"
  ></iframe>
</template>

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