Safari 14.1.2环境下使用PrintJS打印PDF出现空白页问题求助

该问题是Safari 14.x版本的固有特性导致：该版本对PDF异步渲染、Blob资源回收的逻辑和主流浏览器存在差异，PrintJS默认的同步打印触发逻辑会在PDF资源完全加载渲染前就唤起打印弹窗，最终显示空白预览。特别注意：如果项目编译目标设置高于ES2015，也可能导致PrintJS内部逻辑在该版本浏览器下执行异常，可先降级编译目标验证问题是否复现。

方案1：调整PrintJS配置，开启延迟打印 #

给PrintJS添加onLoad回调，手动给Safari预留足够的PDF渲染缓冲时间再触发打印，测试下来200-500ms的延迟适配性最好

• 示例代码：

printJS({
  printable: '你的PDF文件地址/Blob对象',
  type: 'pdf',
  showModal: true, // 可选，加载过程中显示提示避免用户重复点击
  onLoad: () => {
    setTimeout(() => {
      window.print()
    }, 300)
  }
})

方案2：针对Blob类型PDF的兼容处理 #

Safari 14.x存在Blob URL提前回收的bug，如果打印触发前Blob URL被系统释放，也会导致iframe加载空白，需要手动保留Blob对象引用直到打印完成

• 示例代码：

// 外层作用域保留Blob对象引用，避免被垃圾回收提前清理
let printPdfBlob = null

function customPrintPdf(blob) {
  printPdfBlob = blob
  const blobUrl = URL.createObjectURL(blob)
  printJS({
    printable: blobUrl,
    type: 'pdf',
    onPrintDialogClose: () => {
      // 打印完成后再释放资源
      URL.revokeObjectURL(blobUrl)
      printPdfBlob = null
    }
  })
}

方案3：降级使用原生iframe打印 #

如果上述配置修改后仍有问题，可以绕过PrintJS的封装逻辑，直接用原生iframe加载PDF后触发打印，适配性更高

• 示例代码：

function printPdfForSafari(pdfUrl) {
  const printIframe = document.createElement('iframe')
  printIframe.style.position = 'absolute'
  printIframe.style.width = '0'
  printIframe.style.height = '0'
  printIframe.style.visibility = 'hidden'
  printIframe.src = pdfUrl
  document.body.appendChild(printIframe)
  
  printIframe.onload = () => {
    // 等待PDF内容完全渲染后再触发打印
    setTimeout(() => {
      printIframe.contentWindow.print()
      // 打印完成后移除iframe
      setTimeout(() => {
        document.body.removeChild(printIframe)
      }, 100)
    }, 300)
  }
}

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