如何在同一标签页打开打印窗口且不修改当前页面内容？

问题出在你调用window.open时传入的第二个参数"_self"——这个参数指定在当前浏览器窗口中打开新页面，所以当前页面的内容会被你写入的htmlData覆盖。

只需要把这个参数改成"_blank"，就能在新的独立窗口中加载打印内容，完全不影响原页面：

print() {
  const WinPrint = window.open(
    " ",
    "_blank", // 替换为_blank，开启新窗口
    "left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0"
  );

  let htmlData =
    "<html><head> <style....</html>";
  WinPrint.document.write(htmlData);
  WinPrint.document.close();
  WinPrint.focus();
  WinPrint.print();
  WinPrint.close();
}

额外注意事项 #

• 部分浏览器会默认拦截弹出窗口，需要提醒用户允许当前站点的弹窗权限，否则打印窗口无法正常打开。
• 如果想规避弹窗拦截问题，也可以用隐藏的iframe承载打印内容：创建一个隐藏的iframe元素，将htmlData写入iframe的文档，再调用iframe的打印方法，这种方式不会触发弹窗拦截。

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