当前位置：首页 > VUE

vue页面实现pdf

2026-01-15 07:50:31VUE

在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 ref="pdfCanvas"></canvas>
  </div>
</template>

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

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

npm install jspdf

生成PDF示例：

<script>
import jsPDF from 'jspdf'

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

显示PDF下载链接

简单实现方式：

<template>
  <a :href="pdfUrl" download>下载PDF</a>
</template>

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

高级功能实现

添加分页控制：

<template>
  <div>
    <pdf :src="pdfSrc" :page="currentPage"></pdf>
    <button @click="prevPage">上一页</button>
    <button @click="nextPage">下一页</button>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfSrc: '/path/to/document.pdf',
      currentPage: 1,
      pageCount: 0
    }
  },
  mounted() {
    this.getPageCount()
  },
  methods: {
    async getPageCount() {
      const loadingTask = pdf.createLoadingTask(this.pdfSrc)
      const pdf = await loadingTask.promise
      this.pageCount = pdf.numPages
    },
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.pageCount) this.currentPage++
    }
  }
}
</script>

以上方法涵盖了从简单显示到高级控制的多种PDF实现方案，可以根据具体需求选择合适的实现方式。

vue页面实现pdf