打印完成后如何移除iframe？绑定onafterprint事件无效

我之前也遇到过一模一样的问题！你的核心问题出在事件绑定的时机和对象不对，导致打印完成后onafterprint根本没触发。咱们一步步来修复：

问题根源分析 #

你原来的代码里同时在两个地方绑定了onafterprint：一个是iframe的contentWindow，另一个是父窗口的frames['print_pdf']。但因为iframe加载PDF是异步的，可能你触发打印的时候，事件还没绑定上；而且直接操作父窗口的frames对象绑定事件，有时候会因为上下文隔离的问题失效。

修复后的完整代码 #

export const printPdf = (data: any) => {
  const newBlob = new Blob([data], { type: 'application/pdf' })
  const fileLink = window.URL.createObjectURL(newBlob)
  const iframe = document.createElement('iframe')
  
  // 先隐藏iframe，避免页面出现不必要的元素
  iframe.style.display = 'none'
  iframe.id = 'print_pdf'
  iframe.name = 'print_pdf'

  iframe.onload = () => {
    const printWindow = iframe.contentWindow
    if (!printWindow) return

    // 绑定到iframe内部的window上下文，确保打印完成后触发
    printWindow.onafterprint = () => {
      // 移除iframe同时释放Blob URL，避免内存泄漏
      document.body.removeChild(iframe)
      window.URL.revokeObjectURL(fileLink)
    }

    // 聚焦打印窗口并触发打印
    printWindow.focus()
    printWindow.print()
  }

  // 最后设置src，确保onload事件能正确捕获到iframe加载完成的时机
  document.body.appendChild(iframe)
  iframe.src = fileLink
}

关键调整说明 #

• 调整src设置时机：把iframe.src = fileLink移到最后，这样能保证onload事件已经绑定完成后，iframe才开始加载PDF，不会出现事件绑定滞后的问题。
• 只在contentWindow绑定事件：直接操作iframe内部的contentWindow来绑定onafterprint，这样事件是属于打印窗口的上下文，打印完成后一定会触发，不会受父窗口上下文的影响。
• 添加Blob URL释放：打印完成后调用window.URL.revokeObjectURL(fileLink)，释放Blob占用的内存，避免长期运行导致内存泄漏。
• 隐藏iframe：给iframe加上display: none，避免页面出现空白的iframe元素，提升用户体验。

额外排查点（如果还是没触发） #

• 确认PDF数据是有效的：如果Blob数据损坏，iframe可能无法正确加载，导致onload事件不触发，自然也不会执行后续的打印和事件绑定。
• 浏览器兼容性：onafterprint在Chrome、Firefox、Edge这些主流浏览器都支持，但如果你需要兼容IE，可能需要用onbeforeprint配合setTimeout来模拟。
• 尝试添加小延迟：如果某些浏览器加载PDF特别慢，可以在printWindow.print()外面套一个setTimeout(() => {}, 100)，给iframe一点额外的加载时间。

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