当前位置：首页 > VUE

vue实现pdf浏览

2026-02-18 05:34:31VUE

使用 vue-pdf 库实现 PDF 预览

vue-pdf 是一个轻量级的 Vue 组件，专门用于在 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: 'https://example.com/sample.pdf'
    }
  }
}
</script>

使用 PDF.js 实现高级功能

Mozilla 的 PDF.js 提供更完整的 PDF 渲染功能，支持分页、缩放等特性。安装核心库：

npm install pdfjs-dist

完整实现示例：

<template>
  <div>
    <canvas v-for="page in numPages" :key="page" :ref="'canvas'+page"></canvas>
  </div>
</template>

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

export default {
  data() {
    return {
      pdfDoc: null,
      numPages: 0
    }
  },
  mounted() {
    this.loadPDF('https://example.com/sample.pdf')
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      this.pdfDoc = await loadingTask.promise
      this.numPages = this.pdfDoc.numPages

      for(let i = 1; i <= this.numPages; i++) {
        const page = await this.pdfDoc.getPage(i)
        const viewport = page.getViewport({ scale: 1.0 })
        const canvas = this.$refs['canvas'+i][0]
        const context = canvas.getContext('2d')

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

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

添加 PDF 控制功能

为 PDF 查看器添加导航控制：

<template>
  <div>
    <button @click="prevPage" :disabled="currentPage <= 1">上一页</button>
    <span>第 {{ currentPage }} 页 / 共 {{ numPages }} 页</span>
    <button @click="nextPage" :disabled="currentPage >= numPages">下一页</button>
    <pdf :src="pdfUrl" :page="currentPage"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: 'https://example.com/sample.pdf',
      currentPage: 1,
      numPages: 0
    }
  },
  mounted() {
    const loadingTask = pdf.createLoadingTask(this.pdfUrl)
    loadingTask.then(pdf => {
      this.numPages = pdf.numPages
    })
  },
  methods: {
    prevPage() {
      if(this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if(this.currentPage < this.numPages) this.currentPage++
    }
  }
}
</script>

处理本地 PDF 文件

实现本地文件上传预览：

<template>
  <div>
    <input type="file" @change="onFileChange" accept=".pdf">
    <pdf :src="pdfFile" v-if="pdfFile"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfFile: null
    }
  },
  methods: {
    onFileChange(e) {
      const file = e.target.files[0]
      if(file.type !== 'application/pdf') {
        alert('请选择PDF文件')
        return
      }
      this.pdfFile = URL.createObjectURL(file)
    }
  }
}
</script>