如何在JSPDF中渲染Base64图片？图片显示异常问题求助

AI 小北

2026-7-7

解决jsPDF渲染Base64图片失败问题

针对你遇到的PNG生成空白PDF、JPEG生成后图片不显示的问题，可按以下步骤排查修复：

确认Base64字符串完整性
确保data?.photo开头包含正确的图片类型前缀：PNG需带data:image/png;base64,，JPEG需带data:image/jpeg;base64,。缺失前缀会导致jsPDF无法识别图片格式，可通过console.log(data?.photo.slice(0, 50))检查开头内容。

清理Base64编码中的无效字符
部分Base64字符串可能包含空格、换行等无效字符，先清理后再传入：

if (data?.photo) {
  const cleanBase64 = data.photo.replace(/\s/g, '');
  doc.addImage(cleanBase64, 'PNG', pageWidth - 140, 120, 100, 120);
}

验证图片坐标是否超出页面范围
检查pageWidth - 140的计算结果是否合理，比如A4纸默认宽度为210（单位：mm），若pageWidth值错误，可能导致图片被渲染到页面外。可先固定坐标测试：
```
doc.addImage(data?.photo, 'PNG', 20, 20, 100, 120);
```

改用异步加载图片的方式
jsPDF同步处理Base64图片时，可能因图片未加载完成就生成PDF导致空白。建议先将Base64转为Image对象，加载完成后再渲染：

if (data?.photo) {
  const img = new Image();
  img.src = data.photo;
  img.onload = () => {
    doc.addImage(img, 'PNG', pageWidth - 140, 120, 100, 120);
    // 必须在图片加载完成后再保存PDF
    doc.save('result.pdf');
  };
}