使用pdf-lib在Nest.js中无法添加PNG图片至PDF的问题

问题根源 #

pdf-lib的embedPng方法要求传入二进制Uint8Array数据，而你直接传入了原始Base64字符串。虽然控制台不会报错，但pdf-lib无法正确解析这个格式，导致图片无法渲染到PDF中。

修复方案 #

1. 清理Base64字符串：如果你的signBase64包含data:image/png;base64,前缀，需要先移除它
2. 将纯Base64字符串解码为Uint8Array
3. 再将解码后的二进制数据传入embedPng

修正后的代码 #

import { PDFDocument } from 'pdf-lib';
import * as fs from 'fs';

// 读取现有PDF
const existingPdf = await fs.promises.readFileSync('./agreements/1431993ded73f6a0be5653a3e3fc680f.pdf');
const pdfDoc = await PDFDocument.load(existingPdf);
const pdfPage = pdfDoc.getPage(1); // getPage是同步方法，无需await

// 处理Base64图片
let base64Str = getAddressDto.signBase64;
// 移除可能的data URI前缀
if (base64Str.startsWith('data:image/png;base64,')) {
  base64Str = base64Str.split(',')[1];
}
// 解码为Uint8Array
const pngBytes = Uint8Array.from(atob(base64Str), c => c.charCodeAt(0));

// 嵌入并绘制图片
const pdfImage = await pdfDoc.embedPng(pngBytes);
pdfPage.drawImage(pdfImage, {
  x: 10,
  y: 10,
  width: 15,
  height: 40,
});

return await pdfDoc.save();

额外验证点 #

• 确认坐标x:10, y:10是否在页面可见范围内：PDF坐标原点在左下角，若页面高度小于50，y=10加上高度40可能超出页面顶部，可尝试调整y值（比如设为pdfPage.getHeight() - 50）
• 验证Base64字符串有效性：将解码后的Uint8Array保存为本地PNG文件，确认图片本身无损坏

内容的提问来源于stack exchange，提问作者Aleks Daddario