当前位置：首页 > VUE

vue实现pdf的填充

2026-01-21 11:01:36VUE

实现PDF填充的方法

在Vue中实现PDF填充可以通过多种方式完成，以下是几种常见的方法：

使用pdf-lib库

pdf-lib是一个纯JavaScript库，可以在浏览器和Node.js中操作PDF文档。它支持动态填充表单字段、添加文本和图像等操作。

安装pdf-lib：

npm install pdf-lib

示例代码：

import { PDFDocument } from 'pdf-lib'

async function fillPdfForm() {
  const formUrl = '/path/to/form.pdf'
  const formPdfBytes = await fetch(formUrl).then(res => res.arrayBuffer())

  const pdfDoc = await PDFDocument.load(formPdfBytes)
  const form = pdfDoc.getForm()

  // 填充表单字段
  form.getTextField('name').setText('John Doe')
  form.getTextField('email').setText('john@example.com')

  // 保存修改后的PDF
  const modifiedPdfBytes = await pdfDoc.save()
  return modifiedPdfBytes
}

使用PDF.js

PDF.js是Mozilla开发的PDF渲染库，也可以用于基本的PDF操作。

安装pdf.js：

npm install pdfjs-dist

示例代码：

import * as pdfjsLib from 'pdfjs-dist'

async function renderPdf() {
  const loadingTask = pdfjsLib.getDocument('/path/to/document.pdf')
  const pdf = await loadingTask.promise

  // 获取第一页
  const page = await pdf.getPage(1)

  // 渲染PDF到canvas
  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

  const renderContext = {
    canvasContext: context,
    viewport: viewport
  }
  await page.render(renderContext).promise
}

使用第三方服务

对于更复杂的需求，可以考虑使用专门的PDF服务API，如PDFTron、iText或Adobe PDF Services。

示例使用PDFTron：

import { WebViewer } from '@pdftron/webviewer'

WebViewer({
  path: '/lib',
  initialDoc: '/path/to/document.pdf'
}, document.getElementById('viewer')).then(instance => {
  const { docViewer, Annotations } = instance.Core

  docViewer.on('documentLoaded', () => {
    const annotManager = docViewer.getAnnotationManager()

    // 添加文本注释
    const textWidget = new Annotations.TextWidgetAnnotation()
    textWidget.PageNumber = 1
    textWidget.X = 100
    textWidget.Y = 100
    textWidget.Width = 200
    textWidget.Height = 50
    textWidget.setText('Filled Text')

    annotManager.addAnnotation(textWidget)
    annotManager.drawAnnotations(1)
  })
})

表单字段填充注意事项

确保PDF文档包含可编辑的表单字段
字段名称需要与代码中使用的名称完全匹配
考虑字体和布局问题，避免填充后文本溢出
对于复杂的PDF模板，可能需要专业工具预先设计

在Vue组件中的实现

在Vue组件中，可以将PDF操作封装为方法，并通过响应式数据驱动填充内容：

export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        date: ''
      },
      pdfBytes: null
    }
  },
  methods: {
    async fillAndDownload() {
      const filledPdf = await fillPdfForm(this.formData)
      this.downloadPdf(filledPdf)
    },

    async fillPdfForm(formData) {
      // 实现填充逻辑，返回填充后的PDF字节
    },

    downloadPdf(pdfBytes) {
      const blob = new Blob([pdfBytes], { type: 'application/pdf' })
      const link = document.createElement('a')
      link.href = URL.createObjectURL(blob)
      link.download = 'filled-form.pdf'
      link.click()
    }
  }
}