当前位置：首页 > VUE

vue实现pdf

2026-03-28 01:37:56VUE

Vue 中实现 PDF 功能的方法

在 Vue 项目中实现 PDF 功能可以通过多种方式完成，常见方法包括使用第三方库、直接嵌入 PDF 文件或生成 PDF 内容。以下是几种常用方法：

使用 vue-pdf 库显示 PDF

安装 vue-pdf 库可以方便地在 Vue 应用中渲染 PDF 文件：

npm install vue-pdf --save

在组件中使用：

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

<script>
import pdf from 'vue-pdf'

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

使用 pdf.js 直接渲染

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

npm install pdfjs-dist --save

组件实现示例：

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

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

export default {
  mounted() {
    this.renderPDF('/path/to/document.pdf')
  },
  methods: {
    async renderPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      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>

生成 PDF 内容

使用 jspdf 库可以动态生成 PDF 文件：

npm install jspdf --save

生成 PDF 示例：

<script>
import jsPDF from 'jspdf'

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

嵌入 PDF 文件

最简单的方法是使用 <iframe> 或 <embed> 标签直接嵌入 PDF：

<template>
  <embed 
    src="/path/to/document.pdf" 
    type="application/pdf"
    width="100%"
    height="600px"
  >
</template>

使用 vue-pdf-embed 组件

vue-pdf-embed 提供了更现代化的 PDF 查看体验：

npm install vue-pdf-embed --save

使用示例：

vue实现pdf

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

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

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

每种方法适用于不同场景，根据项目需求选择最合适的方式。对于简单查看功能，vue-pdf 或直接嵌入即可；需要更复杂功能时，pdf.js 提供了更多控制选项；而动态生成 PDF 则适合需要自定义内容的场景。