如何在浏览器中不打开新窗口调出打印对话框

方案一：不新开窗口，用页面内隐藏元素实现 #

不用新开窗口，直接在当前页面创建一个隐藏容器，把要打印的HTML数据塞进去，再通过CSS控制打印时只显示这个容器、隐藏页面其他内容，最后调用系统打印功能即可。

代码示例：

<style>
/* 打印时仅显示打印容器，其余内容隐藏 */
@media print {
  body > *:not(.print-box) {
    display: none !important;
  }
  .print-box {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }
}
/* 平时将打印容器隐藏 */
.print-box {
  display: none;
}
</style>

<script>
function printMyHtml(data) {
  // 查找或创建打印容器
  let printBox = document.querySelector('.print-box');
  if (!printBox) {
    printBox = document.createElement('div');
    printBox.className = 'print-box';
    document.body.appendChild(printBox);
  }
  // 插入待打印的HTML内容
  printBox.innerHTML = data;
  // 触发打印
  window.print();
  // 打印完成后可清空容器内容（可选）
  printBox.innerHTML = '';
}
</script>

方案二：让新窗口对用户不可见 #

如果仍想保留新窗口的实现逻辑，可以将窗口定位到屏幕可视区域外，或设置极小尺寸，让用户看不到这个窗口。不过注意，部分浏览器可能会拦截这类操作，或者窗口过小导致打印预览异常，因此这个方案不如第一个稳妥。

代码示例：

var w = window.open('', '_blank', 'width=1,height=1,top=-9999,left=-9999');
w.document.write(data);
// 等待内容加载完成后再打印，避免内容未渲染
w.onload = function() {
  w.print();
  w.close();
};

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