如何使用React JS为PDF文件添加自定义元数据？

你当前代码的问题在于，直接给Blob对象挂载自定义属性根本不会修改PDF文件本身的元数据。Blob只是浏览器中封装二进制数据的容器，你添加的blob[key] = metadata[key]只是给这个JS对象加了额外属性，完全不会被编码到PDF文件的二进制内容里，所以下载后自然看不到这些元数据。

要真正修改PDF的元数据，必须操作PDF文件的内部结构，这得用专门的PDF处理库，比如pdf-lib。下面是可行的实现代码：

实现步骤与代码 #

首先引入pdf-lib（前端项目可通过npm安装@pdf-lib/core，或直接用CDN引入）：

import { PDFDocument } from '@pdf-lib/core';

const blobToBase64 = (blob: Blob) =>
  new Promise<string | ArrayBuffer | null>((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });

const updatePDFMetaData = async (file: File, metadata: Record<string, string>) => {
  try {
    // 读取原始PDF文件的ArrayBuffer
    const fileBuffer = await file.arrayBuffer();
    // 加载PDF文档
    const pdfDoc = await PDFDocument.load(fileBuffer);
    
    // 合并现有元数据与自定义元数据，写入PDF
    const updatedMetadata = { ...pdfDoc.getMetadata(), ...metadata };
    pdfDoc.setMetadata(updatedMetadata);

    // 保存修改后的PDF为ArrayBuffer，转为Blob
    const modifiedPdfBuffer = await pdfDoc.save();
    const modifiedBlob = new Blob([modifiedPdfBuffer], { type: 'application/pdf' });
    
    // 转为Base64（按需使用）
    const base64Data = await blobToBase64(modifiedBlob);
    console.log("修改后的Base64数据", base64Data);

    // 可选：下载修改后的文件
    const url = URL.createObjectURL(modifiedBlob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `modified-${file.name}`;
    a.click();
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error("修改PDF元数据失败", error);
  }
};

关键说明 #

• pdf-lib会解析PDF的内部结构，真正将元数据写入文件的XMP信息字典中，修改后的文件在属性面板里能直接看到自定义元数据。
• 标准PDF元数据字段（如title、author）和自定义字段都能通过setMetadata设置，大部分PDF查看器都支持识别。
• 彻底避免了直接操作Blob对象的无效操作，所有修改都针对PDF文档的实际内容。

内容的提问来源于stack exchange，提问作者R.shitre