设置innerHTML打印指定div后页面无响应，按钮失效如何解决？

嗨，这个问题我做项目时也踩过一模一样的坑！你当前的代码问题出在直接替换document.body.innerHTML的操作上——当你把原页面的body内容换成打印区域的HTML时，原页面所有DOM元素绑定的事件监听、JavaScript组件实例都会被彻底销毁。之后再把originalContents赋值回去，虽然HTML结构看起来和原来一样，但这些都是全新创建的DOM元素，原来的事件绑定、脚本引用早就不存在了，所以按钮点不动、脚本失效。最后那句window.reload()其实完全没必要，还会强制刷新页面，弄丢用户的操作状态。

给你两个靠谱的解决方案，按需选择：

方案一：用CSS媒体查询（最简单，推荐优先用） #

这种方法不需要修改任何DOM结构，只用CSS控制打印时的显示内容，完全不影响原页面：

首先在你的样式表中添加打印专用的CSS：

@media print {
  /* 打印时隐藏页面所有内容 */
  body * {
    visibility: hidden;
  }
  /* 只显示需要打印的区域及其子元素 */
  .mx-name-PrintArea, .mx-name-PrintArea * {
    visibility: visible;
  }
  /* 把打印区域定位到页面顶部，避免打印空白 */
  .mx-name-PrintArea {
    position: absolute;
    left: 0;
    top: 0;
  }
}

然后JavaScript只需要一行代码：

window.print();

这个方法的优点是零DOM操作，原页面完全不受影响，打印完直接回到正常状态。如果你的打印区域样式不复杂，优先选这个！

方案二：用隐藏iframe打印（适合复杂打印场景） #

如果需要对打印内容做特殊处理（比如修改HTML结构、单独设置打印样式），用iframe的方式更安全，因为它完全独立于原页面：

// 获取要打印的区域
const printTarget = document.querySelector('.mx-name-PrintArea');

// 创建一个隐藏的iframe
const printIframe = document.createElement('iframe');
printIframe.style.display = 'none';
document.body.appendChild(printIframe);

// 获取iframe的文档对象
const iframeDoc = printIframe.contentDocument || printIframe.contentWindow.document;

// 写入打印内容，同时复制原页面的样式表保证打印样式一致
iframeDoc.write(`
  <html>
    <head>
      <title>打印内容</title>
      <!-- 复制原页面的所有样式 -->
      ${Array.from(document.styleSheets).map(sheet => {
        try {
          // 处理内联样式表和外部样式表
          return sheet.cssText ? `<style>${sheet.cssText}</style>` : `<link rel="stylesheet" href="${sheet.href}">`;
        } catch (e) {
          // 跨域样式表无法读取，跳过
          return '';
        }
      }).join('')}
    </head>
    <body>${printTarget.innerHTML}</body>
  </html>
`);
iframeDoc.close();

// 等待iframe加载完成后触发打印
printIframe.onload = function() {
  printIframe.contentWindow.print();
  // 打印完成后移除iframe，清理资源
  setTimeout(() => {
    document.body.removeChild(printIframe);
  }, 100);
};

这个方法的核心是把打印内容放到独立的iframe里，完全不碰原页面的DOM和事件，打印完删掉iframe就行，原页面的所有交互都不会受影响。

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