window.print()打印时单选框/复选框选中状态不显示的问题求助

我来帮你分析一下问题所在，然后给出具体的修复方案：

问题根源 #

1. 不必要的节点克隆替换：你代码中的printElement函数会克隆#printThis节点，然后清空原节点再把克隆节点加回去。这一步完全多余，而且会导致Angular编译过的DOM节点被未编译的克隆节点替换，ng-model的绑定关系失效，进而影响单选框的选中状态渲染。
2. 打印样式的冲突：你的打印CSS中设置了#printThis * { visibility: visible; }，这会让原本被隐藏的原生单选框input元素显示出来，同时浏览器默认不打印背景色，导致你自定义的单选框指示器（.control__indicator）的选中状态样式无法正常呈现。

修复方案 #

步骤1：移除多余的节点克隆逻辑 #

首先修改打印按钮的点击事件，删掉不必要的printElement调用：

document.getElementById("btnPrint").onclick = function() {
  // 直接调用打印即可，无需克隆替换节点
  window.print();
}

同时可以删除整个printElement函数，因为它现在没有作用了。

步骤2：调整打印样式，确保选中状态正常显示 #

更新你的@media print样式，解决原生input显示和背景色不打印的问题：

@media print {
  body * { visibility: hidden; }
  #printThis, #printThis * { visibility: visible; }
  #printThis { position: absolute; left: 0; top: 0; }
  
  /* 强制浏览器打印背景色/样式，确保自定义指示器的选中状态可见 */
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  
  /* 隐藏原生单选框input，避免和自定义指示器冲突 */
  .control--radio input {
    position: absolute;
    opacity: 0;
    visibility: hidden !important;
  }
  
  /* 确保自定义指示器始终可见 */
  .control__indicator {
    visibility: visible !important;
  }
}

步骤3（可选）：手动同步单选框状态（如果仍有问题） #

如果上述修改后还是有问题，可以在打印前手动同步单选框的checked属性和Angular模型值，确保DOM状态正确：

document.getElementById("btnPrint").onclick = function() {
  // 获取所有单选框
  const radios = document.querySelectorAll('#printThis input[type="radio"]');
  radios.forEach(radio => {
    // 手动同步checked状态（Angular应该已经同步，但做个兜底）
    radio.checked = radio.value === angular.element(radio).scope().formData.gender;
  });
  window.print();
}

注意：这个方法需要确保你能正确获取到Angular的作用域，如果你的页面结构有嵌套作用域，可能需要调整获取方式。

这样修改后，打印预览里应该就能正常显示单选框的选中状态了。

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