Safari中调用window.print()二次打印失效问题咨询

问题表现 #

在Safari浏览器中调用打印功能时，首次打印可正常触发，若在打印弹窗中点击Cancel取消后再次触发打印，预览窗口仅显示空白页，该问题同时存在于iframe打印PDF、顶层窗口直接打印两种场景。

根因分析 #

• Safari内核的打印状态缓存机制存在缺陷：首次调用print()方法后，如果用户取消打印，浏览器不会主动释放当前文档关联的打印上下文，二次触发打印时会直接复用已失效的上下文，导致内容无法正常渲染
• 不可见iframe打印PDF场景下，PDF blob资源的引用在首次打印取消后会被Safari错误标记为已使用，二次打印时无法正常加载资源到预览窗口

修复方案 #

方案1：动态重建打印载体（推荐适配iframe打印PDF场景） #

不要复用同一个iframe实例，每次触发打印时创建全新的iframe，打印完成或取消后立即销毁实例，示例代码如下：

function printPdfByBlob(pdfBlob) {
  // 每次打印新建独立iframe，避免状态复用
  const printIframe = document.createElement('iframe')
  printIframe.style.position = 'absolute'
  printIframe.style.width = '0'
  printIframe.style.height = '0'
  printIframe.style.visibility = 'hidden'
  printIframe.src = URL.createObjectURL(pdfBlob)
  document.body.appendChild(printIframe)

  // 等待iframe加载完成后触发打印
  printIframe.onload = () => {
    setTimeout(() => {
      printIframe.contentWindow.print()
      // 打印触发后延迟销毁载体，兼容Safari异步执行逻辑
      setTimeout(() => {
        document.body.removeChild(printIframe)
        URL.revokeObjectURL(printIframe.src)
      }, 100)
    }, 50)
  }
}

方案2：顶层窗口打印场景重置上下文 #

如果是直接打印当前顶层窗口内容，可通过监听打印前后事件强制清理缓存状态，示例代码如下：

function printCurrentPage() {
  window.onbeforeprint = () => {
    // 主动触发重绘，清理Safari缓存的无效打印状态
    void document.body.offsetHeight
  }
  window.onafterprint = () => {
    // 打印流程结束后清理事件绑定，避免内存泄漏
    window.onbeforeprint = null
    window.onafterprint = null
  }
  window.print()
}

方案3：print.js库适配 #

如果基于print.js库实现打印逻辑，可修改库核心代码适配Safari：

• 移除原有iframe复用逻辑，每次打印请求创建新的iframe实例
• 适当延长iframe加载完成后调用打印方法的延迟时间，适配Safari的PDF资源渲染耗时
• 打印触发后立即解绑iframe所有关联事件，销毁实例释放资源

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