使用jspdf-html2canvas导出PDF时CSS在iPhone失效、安卓正常的问题求助

排查步骤 #

• 首先确认printArea区域使用的CSS属性是否兼容iOS Safari：排查是否使用了position: sticky/fixed、CSS Grid新特性、filter滤镜、无前缀的webkit专属属性、背景渐变等html2canvas在iOS端支持较差的属性，可临时替换为基础CSS属性验证是否是属性兼容问题。
• 检查导出触发时机：iOS端DOM渲染和资源加载优先级低于安卓，容易出现样式、字体、图片未完全渲染就触发导出的情况，可先添加300-500ms的延迟再调用导出方法验证是否是时机问题。
• 验证样式读取逻辑：html2canvas在iOS端对外部样式表、内嵌样式表的读取优先级很低，可先将所有样式改为行内style属性验证是否是样式读取失效问题。

可行解决方案 #

代码调整 #

修正原代码的语法错误，增加延迟、修改图片格式、适配iOS导出逻辑：

import html2df from "jspdf-html2canvas"
// 修正原语法错误：printBooking() = () => 改为 printBooking = () =>
printBooking = () => {
  var pdfData = document.getElementById("printArea");
  // 增加延迟等待iOS端DOM完全渲染
  setTimeout(() => {
    html2df(pdfData,{
      jsPDF:{
        unit:"px",
        format:'a4',
      },
      // jpeg在iOS端半透明、阴影区域处理有bug，替换为png
      imageType:'image/png',
      output:'file.pdf',
      success:function(pdf){
        if(/webos|iphone|ipad|ipod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
          // 最新版iOS Safari已支持直接save，bloburl会被部分版本拦截，可优先用save
          pdf.save(this.output)
          // 如果必须用新窗口打开，可将blob转base64后打开
          // window.open("data:application/pdf;base64," + pdf.output('datauristring').split(',')[1])
        }
        else{
          pdf.save(this.output)
        }
      }
    });
  }, 300)
}

样式调整 #

• 所有样式优先写行内style属性，避免外部样式、内嵌样式读取失效。
• 所有单位统一替换为固定px，避免rem/em/vw等相对单位在iOS端计算偏差。
• 移除float布局，替换为flex或普通块级布局，移除所有iOS兼容差的CSS属性。
• 如果使用自定义字体，提前通过FontFace API加载完成后再触发导出逻辑。

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