Vue 3 + pdf-lib 实现浏览器端 PDF 元数据编辑

译注：本文编译自 dev.to 社区文章《How to Edit PDF Metadata in the Browser with Vue 3 and pdf-lib》，作者演示了如何在前端完成 PDF 文档属性的读取与写入。原文链接见文末。

编辑 PDF 元数据，指的是读写文档的标题、作者、主题等属性。本文介绍如何用 Vue 3 与 pdf-lib 构建一个纯浏览器端的 PDF 元数据编辑器。

核心难点：在更新元数据的同时保留页面内容

PDF 元数据编辑的完整流程包括：

1. 加载源 PDF
2. 读取已有元数据字段
3. 用新值更新元数据
4. 保存时不影响页面内容

技术栈

• Vue 3，使用 Composition API
• pdf-lib，负责 PDF 操作
• Vite，负责打包

核心实现

<script setup lang="ts">
import { ref } from 'vue'
import { PDFDocument } from 'pdf-lib'

const file = ref<File | null>(null)
const metadata = ref({
  title: '',
  author: '',
  subject: '',
  keywords: '',
  creator: '',
  producer: ''
})
const loading = ref(false)
const result = ref<Uint8Array | null>(null)

async function handleFile(e: Event) {
  const input = e.target as HTMLInputElement
  if (!input.files?.[0]) return
  file.value = input.files[0]

  // 读取已有元数据
  const arrayBuffer = await file.value.arrayBuffer()
  const pdfDoc = await PDFDocument.load(arrayBuffer)

  metadata.value = {
    title: pdfDoc.getTitle() || '',
    author: pdfDoc.getAuthor() || '',
    subject: pdfDoc.getSubject() || '',
    keywords: pdfDoc.getKeywords() || '',
    creator: pdfDoc.getCreator() || '',
    producer: pdfDoc.getProducer() || ''
  }
}

async function saveMetadata() {
  if (!file.value) return
  loading.value = true

  const arrayBuffer = await file.value.arrayBuffer()
  const pdfDoc = await PDFDocument.load(arrayBuffer)

  // 更新元数据
  pdfDoc.setTitle(metadata.value.title)
  pdfDoc.setAuthor(metadata.value.author)
  pdfDoc.setSubject(metadata.value.subject)
  pdfDoc.setKeywords(metadata.value.keywords)
  pdfDoc.setCreator(metadata.value.creator)
  pdfDoc.setProducer(metadata.value.producer)

  result.value = await pdfDoc.save()
  loading.value = false
}
</script>

关键实现细节

1. 读取元数据

pdf-lib 为所有标准元数据字段提供了 getter 方法：

const title = pdfDoc.getTitle()
const author = pdfDoc.getAuthor()
const subject = pdfDoc.getSubject()

2. 设置元数据

使用 setter 方法更新元数据值：

pdfDoc.setTitle(newTitle)
pdfDoc.setAuthor(newAuthor)
pdfDoc.setSubject(newSubject)

3. 处理空值

通过设置空字符串来清除元数据：

pdfDoc.setTitle('')  // 移除标题

局限性

不支持批量编辑

该实现一次只能处理一个 PDF。

解决方案：在循环中按顺序处理多个文件。

元数据字段有限

仅支持标准 PDF 元数据，不支持自定义 XMP 元数据。

解决方案：如需高级元数据编辑，可使用桌面软件。

缺少校验

空值或非法元数据值会被直接接受，不会给出警告。

解决方案：在保存前加入表单校验。

小结

构建浏览器端 PDF 元数据编辑器，主要包含以下步骤：

1. 使用 pdf-lib 加载并读取元数据
2. 提供表单用于编辑字段
3. 将更新后的元数据保存为新 PDF
4. 提供下载功能

作者提供了一个在线示例：en.sotool.top/edit-metadata。

原文链接

https://dev.to/sunshey/how-to-edit-pdf-metadata-in-the-browser-with-vue-3-and-pdf-lib-1h5