iPhone Safari中jsPDF转PDF报错：无效Base64字符串问题求助

针对你遇到的iPhone Safari下pdf.js supplied data is not a valid base64-String报错，核心问题是Safari对canvas.toDataURL("image/jpeg")的处理存在兼容性问题，导致生成的base64字符串格式不符合jsPDF的要求。以下是具体解决方法：

1. 改用canvas.toBlob替代toDataURL #

toBlob是异步API，能更可靠地处理图片数据，避免Safari中JPEG格式的base64异常。修改后的代码如下：

savePdf(){
  const div = document.getElementById("pdfReport");
  const fileName = "ponudba.pdf";
  // 移除手动指定的height/width，让html2canvas自动计算元素尺寸
  const options = {backgroundColor: "white", useCORS: true};

  html2canvas(div, options).then((canvas) => {
    const pageWidth = 208;
    const imgHeight = canvas.height * pageWidth / canvas.width;
    const imgWidth = pageWidth;
    const position = 0;
    const doc = new jsPDF("p", "mm", "a4");

    // 用toBlob生成图片Blob，再转换为base64
    canvas.toBlob((blob) => {
      const reader = new FileReader();
      reader.onload = function(e) {
        // FileReader返回的result是标准的base64字符串
        const base64Data = e.target.result;
        doc.addImage(base64Data, 'JPEG', 0, position, imgWidth, imgHeight);
        const pdfBlob = doc.output('blob');
        
        // 可选：添加下载逻辑
        const link = document.createElement('a');
        link.href = URL.createObjectURL(pdfBlob);
        link.download = fileName;
        link.click();
      };
      reader.readAsDataURL(blob);
    }, "image/jpeg", 0.3);
  });    
}

2. 备选方案：切换为PNG格式 #

如果JPEG格式仍有问题，可尝试改用PNG，Safari对PNG的toDataURL支持更稳定：

// 替换toDataURL部分
let imgData = canvas.toDataURL("image/png");        
// addImage时修改类型为PNG
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);

3. 其他兼容性调整 #

• 移除html2canvas配置中手动设置的height和width：Safari中clientHeight/clientWidth可能返回不准确的值，让html2canvas自动计算元素尺寸更可靠。
• 升级html2canvas和jsPDF到最新版本：旧版本可能存在未修复的Safari兼容BUG。
• 检查目标div尺寸：Safari对canvas的最大宽高有限制（通常为4096x4096），如果div过大，会导致canvas生成异常，进而使base64无效。

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