当前位置：首页 > VUE

vue页面实现pdf

2026-03-08 10:31:29VUE

在Vue中实现PDF显示或生成

使用vue-pdf库显示PDF文件

安装vue-pdf库：

npm install vue-pdf

在组件中引入并使用：

import pdf from 'vue-pdf'

export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/path/to/document.pdf',
      pageNum: 1,
      pageCount: 0
    }
  },
  methods: {
    onPageChange(pageNum) {
      this.pageNum = pageNum
    }
  }
}

模板部分：

<template>
  <div>
    <pdf :src="pdfUrl" @num-pages="pageCount = $event" @page-loaded="pageNum = $event" />
    <p>Page {{ pageNum }} of {{ pageCount }}</p>
  </div>
</template>

使用pdf-lib生成PDF文件

安装pdf-lib库：

vue页面实现pdf

npm install pdf-lib

生成PDF示例代码：

import { PDFDocument, StandardFonts, rgb } from 'pdf-lib'

async function createPdf() {
  const pdfDoc = await PDFDocument.create()
  const page = pdfDoc.addPage()
  const font = await pdfDoc.embedFont(StandardFonts.Helvetica)

  page.drawText('Hello Vue PDF!', {
    x: 50,
    y: page.getHeight() - 50,
    size: 30,
    font,
    color: rgb(0, 0, 0)
  })

  const pdfBytes = await pdfDoc.save()
  return pdfBytes
}

使用jsPDF生成PDF

安装jsPDF库：

npm install jspdf

基本使用示例：

vue页面实现pdf

import jsPDF from 'jspdf'

function generatePDF() {
  const doc = new jsPDF()
  doc.text('Hello Vue!', 10, 10)
  doc.save('document.pdf')
}

使用iframe嵌入PDF

简单嵌入方法：

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

使用PDF.js自定义渲染

安装pdfjs-dist：

npm install pdfjs-dist

使用示例：

import * as pdfjsLib from 'pdfjs-dist/webpack'

async function renderPDF(url, canvasElement) {
  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 = canvasElement
  const context = canvas.getContext('2d')

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

  const renderContext = {
    canvasContext: context,
    viewport: viewport
  }

  await page.render(renderContext).promise
}