Angular打印后页面内容无法点击的问题及解决方案咨询

直接替换document.body.innerHTML再恢复的操作会破坏Angular组件的DOM事件绑定。Angular的事件（如按钮click）依赖框架内部的绑定机制实现，并非原生DOM事件直接挂载，还原innerHTML后这些绑定关系会丢失，导致页面元素无法响应点击。

改用iframe承载打印内容，不修改原页面DOM结构，避免破坏原有绑定：

修改后的TypeScript代码 #

print(cmpName) {
  const printContents = document.getElementById(cmpName).innerHTML;
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);

  const doc = iframe.contentDocument || iframe.contentWindow.document;
  doc.write(`
    <html>
      <head>
        <title>Print</title>
        <!-- 引入项目样式文件，保证打印样式与原页面一致，路径按需调整 -->
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>${printContents}</body>
    </html>
  `);
  doc.close();

  iframe.contentWindow.focus();
  iframe.contentWindow.print();
  
  // 打印完成后移除iframe
  setTimeout(() => {
    document.body.removeChild(iframe);
  }, 100);
}

说明 #

• 该方案通过独立的iframe处理打印流程，完全不干扰原页面的DOM结构和Angular事件绑定。
• 若需要打印内容的样式与原页面一致，记得在iframe的<head>中引入项目的全局样式文件（路径根据实际项目结构调整）。

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