如何使用JavaScript打印网页指定区域并保留原有CSS样式

问题根因 #

你原有代码的核心问题是：通过window.open生成的是独立的空白文档，仅写入了目标区域的DOM结构，没有继承原页面的任何内联样式、外链样式表配置，你在原页面编写的print媒体查询规则完全没有被加载到打印弹窗的文档中，自然不会生效。

可用修复方案 #

• 方案1：复制原页面样式到打印弹窗（适配你原有的新开窗口逻辑）
  修改原有JS代码如下即可：

const print_div = document.getElementById('待打印区域的ID');
const print_area = window.open('', '_blank', 'width=800,height=600');
// 先把原页面所有样式复制到新窗口的head中
document.querySelectorAll('style, link[rel="stylesheet"]').forEach(item => {
  print_area.document.head.appendChild(item.cloneNode(true));
});
// 写入打印区域内容
print_area.document.body.innerHTML = print_div.innerHTML;
print_area.document.close();
print_area.focus();
// 加延时等待样式渲染完成再触发打印，避免样式未加载完成
setTimeout(() => {
  print_area.print();
  print_area.close();
}, 300);

• 方案2：直接通过打印媒体查询控制元素显隐（更稳定，不需要新开窗口）
  你已经配置了print媒体查询，直接在里面新增全局显隐规则即可，不需要新开窗口就能实现指定区域打印，样式完全继承原页面配置：

@media print {
  /* 先隐藏所有元素 */
  body * {
    visibility: hidden;
  }
  /* 只显示打印区域及内部元素 */
  #待打印区域的ID, #待打印区域的ID * {
    visibility: visible;
  }
  /* 把打印区域固定到页面左上角，避免空白边距 */
  #待打印区域的ID {
    position: absolute;
    left: 0;
    top: 0;
  }
  /* 你原有的其他打印样式可以保留在这里 */
}

对应JS代码直接简化为：

window.print();

注意：如果使用方案1且你的样式是跨域外链资源，需要确认资源支持跨域访问，否则可能出现样式加载失败的问题，同域名下的静态资源不会有这个问题。

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