React使用JSPDF生成PDF上传Firebase Storage后图片丢失问题求助

问题根因说明 #

你推测的CORS问题不成立：如果图片已经正确嵌入PDF内部，打开PDF时不会发起额外的跨域资源请求，图片无法显示的核心原因是图片未完全嵌入PDF，或者上传/下载过程中PDF文件结构被损坏。

解决方案 #

1. 确保ArcGIS截图硬嵌入PDF #

调用takeScreenshot()后不要直接传入临时Blob URL给JSPDF，要转成base64编码的Data URL后再插入，保证图片二进制内容完全写入PDF文件：

view.takeScreenshot().then(screenshot => {
  // 直接使用screenshot返回的base64 Data URL，不要生成临时Blob URL
  const imgBase64 = screenshot.dataUrl;
  // 传入JSPDF，坐标和尺寸根据你的需求调整
  pdf.addImage(imgBase64, 'PNG', 10, 10, 190, 100);
  // 确认插入完成后再生成Blob上传
})

2. 规范PDF Blob的MIME类型 #

部分版本JSPDF输出Blob时默认MIME类型不标准，会导致Firebase上传时自动识别文件类型出错，损坏PDF结构，修改生成和上传逻辑：

// 生成Blob时手动指定MIME类型
var blob = pdf.output('blob', { type: 'application/pdf' });
// 上传时额外指定文件元数据，避免Firebase自动识别出错
var uploadTask = storageRef.child(noSpaceRef).put(blob, {
  contentType: 'application/pdf'
});

3. 分场景验证问题环节 #

你可以先从Firebase控制台手动下载上传后的PDF，按以下两种情况排查：

• 控制台下载的PDF也无图片：确认JSPDF插入图片的逻辑，本地生成Blob后先下载本地验证没问题再走上传逻辑
• 控制台下载的PDF正常，邮件链接下载的无图片：给下载URL加随机时间戳后缀避免邮件服务商缓存拦截，修改为：

this.sendEmail(`${downloadURL}?t=${Date.now()}`)

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