使用jsPDF打印MongoDB存储图片时addImage报UNKNOWN类型错误如何解决

这个错误的核心原因是jsPDF无法识别MongoDB返回的图片资源的实际格式，可按以下步骤逐一排查解决：

• 校验图片响应的MIME类型
  把${baseURL}/${logo}的完整拼接地址直接粘贴到浏览器地址栏访问，打开浏览器控制台「网络」面板，查看该图片请求的响应头Content-Type字段，若返回值不是image/jpeg（比如返回application/octet-stream），需要调整后端接口，返回对应图片格式的正确MIME类型。
• 确认图片实际格式与传入参数匹配
  部分图片虽然后缀为.jpg，但实际编码为PNG、WebP等其他格式，或者文件本身存在损坏。你可以将图片下载到本地，通过属性查看或者格式转换工具确认其实际编码，将addImage的第二个参数调整为和实际格式一致的值，比如PNG格式就传"PNG"。
• 先将图片转为Base64再传入addImage
  jsPDF直接读取URL形式的图片时，对响应头不规范、存在跨域限制的资源兼容性很差，建议先把图片加载为Base64格式再调用接口，参考代码如下：

// 图片URL转Base64工具方法
const getImageBase64 = (imgUrl) => {
  return new Promise((resolve, reject) => {
    const image = new Image();
    // 跨域图片需要添加该配置，前提是后端已配置允许跨域
    image.crossOrigin = 'anonymous';
    image.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(image, 0, 0);
      // 实际是png就改为'image/png'
      resolve(canvas.toDataURL('image/jpeg', 1.0));
    };
    image.onerror = reject;
    image.src = imgUrl;
  })
}

// 生成PDF逻辑
const createPdf = async () => {
  const doc = new jsPDF();
  // 其他PDF内容生成逻辑
  const imgBase64 = await getImageBase64(`${baseURL}/${logo}`);
  doc.addImage(imgBase64, "JPEG", 30, 80, 50, 50);
  doc.save('output.pdf');
}

• 升级jsPDF版本
  你当前使用的2.3.1版本存在部分JPEG格式识别的已知bug，如果前面步骤都无法解决，可以将jsPDF升级到2.5.1及以上版本，即可修复该类格式识别问题。

内容的提问来源于stack exchange，提问作者Zahir Masoodi