当前位置：首页 > VUE

vue实现pdf

2026-02-10 15:44:26VUE

Vue 中实现 PDF 功能的方法

使用 vue-pdf 库

vue-pdf 是一个轻量级的 Vue 组件，用于在 Vue 项目中渲染 PDF 文件。安装后可以直接在组件中使用。

安装依赖：

npm install vue-pdf

基本用法示例：

<template>
  <pdf src="./example.pdf"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}
</script>

使用 pdf.js

Mozilla 的 pdf.js 是一个功能强大的 PDF 渲染库，可以在 Vue 中直接使用。

安装依赖：

npm install pdfjs-dist

示例代码：

vue实现pdf

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

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

export default {
  mounted() {
    this.loadPdf()
  },
  methods: {
    async loadPdf() {
      const loadingTask = pdfjsLib.getDocument('./example.pdf')
      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
      }
      await page.render(renderContext).promise
    }
  }
}
</script>

生成 PDF 文件

使用 jsPDF 库可以在 Vue 中生成 PDF 文件。

安装依赖：

npm install jspdf

示例代码：

<script>
import jsPDF from 'jspdf'

export default {
  methods: {
    generatePDF() {
      const doc = new jsPDF()
      doc.text('Hello Vue!', 10, 10)
      doc.save('example.pdf')
    }
  }
}
</script>

使用 vue-pdf-embed

vue-pdf-embed 是另一个 Vue PDF 查看器组件，支持更多高级功能。

vue实现pdf

安装依赖：

npm install vue-pdf-embed

示例代码：

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

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

export default {
  components: {
    VuePdfEmbed
  },
  data() {
    return {
      pdfSource: './example.pdf'
    }
  }
}
</script>

实现 PDF 预览功能

结合以上方法可以实现完整的 PDF 预览功能，包括翻页、缩放等。

示例代码：

<template>
  <div>
    <button @click="prevPage">上一页</button>
    <span>第 {{ currentPage }} 页 / 共 {{ pageCount }} 页</span>
    <button @click="nextPage">下一页</button>
    <pdf :src="pdfSrc" :page="currentPage" @num-pages="pageCount = $event"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfSrc: './example.pdf',
      currentPage: 1,
      pageCount: 0
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.pageCount) this.currentPage++
    }
  }
}
</script>

这些方法涵盖了 Vue 中处理 PDF 的主要场景，包括显示、生成和预览 PDF 文件。根据项目需求选择合适的方法即可。