当前位置：首页 > VUE

vue项目实现pdf

2026-01-16 20:41:13VUE

实现PDF生成与展示

在Vue项目中实现PDF功能通常涉及生成、预览或下载PDF文件。以下是几种常见场景的实现方法：

使用vue-pdf插件预览PDF

安装依赖：

npm install vue-pdf

组件中使用：

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

<script>
import pdf from 'vue-pdf'
export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: '/sample.pdf' // 本地或远程PDF路径
    }
  }
}
</script>

支持分页显示：

<pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i"></pdf>

使用jsPDF生成PDF

安装jsPDF库：

npm install jspdf

基本生成示例：

vue项目实现pdf

import jsPDF from 'jspdf'

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

添加图片和表格：

doc.addImage(imgData, 'JPEG', 10, 10, 50, 50)
doc.autoTable({ html: '#my-table' })

使用PDF.js处理复杂PDF

引入PDF.js库：

npm install pdfjs-dist

加载PDF文件：

vue项目实现pdf

const loadingTask = pdfjsLib.getDocument(url)
loadingTask.promise.then(pdf => {
  pdf.getPage(1).then(page => {
    const viewport = page.getViewport({ scale: 1.0 })
    const canvas = document.getElementById('pdf-canvas')
    const context = canvas.getContext('2d')
    canvas.height = viewport.height
    canvas.width = viewport.width

    page.render({
      canvasContext: context,
      viewport: viewport
    })
  })
})

服务器端生成PDF

使用Node.js后端生成：

const pdf = require('html-pdf')
app.post('/generate-pdf', (req, res) => {
  pdf.create(htmlTemplate).toStream((err, stream) => {
    stream.pipe(res)
  })
})

前端调用：

axios.post('/generate-pdf', { data }, { responseType: 'blob' })
  .then(response => {
    const blob = new Blob([response.data], { type: 'application/pdf' })
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = 'document.pdf'
    link.click()
  })

处理PDF表单

使用pdf-lib处理表单：

npm install pdf-lib

填写PDF表单：

import { PDFDocument } from 'pdf-lib'

async function fillForm() {
  const pdfDoc = await PDFDocument.load(pdfBytes)
  const form = pdfDoc.getForm()
  form.getTextField('name').setText('John Doe')
  const modifiedPdf = await pdfDoc.save()
}