当前位置：首页 > VUE

vue页面实现pdf

2026-03-28 21:23:01VUE

在Vue页面中实现PDF功能

使用vue-pdf库

安装vue-pdf库：

npm install vue-pdf

在Vue组件中使用：

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

<script>
import pdf from 'vue-pdf'

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

使用PDF.js

安装pdfjs-dist：

npm install pdfjs-dist

基本实现代码：

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

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

export default {
  data() {
    return {
      pdfDoc: null,
      pages: []
    }
  },
  methods: {
    async loadPDF(url) {
      const loadingTask = pdfjsLib.getDocument(url)
      this.pdfDoc = await loadingTask.promise

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

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

      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      page.render(renderContext)
    }
  },
  mounted() {
    this.loadPDF('/path/to/document.pdf')
  }
}
</script>

使用iframe嵌入PDF

简单实现方式：

<template>
  <iframe 
    src="/path/to/document.pdf" 
    width="100%" 
    height="600px"
    style="border: none">
  </iframe>
</template>

生成PDF文件

使用jspdf库生成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('vue-generated.pdf')
    }
  }
}
</script>