点击打印/取消按钮时自动关闭打印弹窗问题求助

直接修改代码，利用浏览器的afterprint事件，在打印对话框关闭后（无论用户选择打印还是取消）自动关闭新窗口，同时修复原代码里的CSS小错误：

print() {
  let popupWin = window.open('', '_blank', 'width=1080,height=595');
  var htmlToPrint = '' +
  '<style type="text/css">' +
  'table th, table td {' +
  'border:1px solid #000;' +
  'padding:0.5em;' + // 修复原代码中padding的语法错误（分号改冒号）
  '}' +
  '</style>';

  popupWin.document.open();
 
  let printContents = this.Page.nativeElement.innerHTML;
  htmlToPrint += printContents;
  let printHead = document.head.innerHTML;
  popupWin.document
    .write(`<html>
       ${printHead}
      <body onload="window.print(); window.addEventListener('afterprint', () => window.close());">${htmlToPrint}</body></html>`);
  popupWin.document.close();
}

关键修改说明 #

• 新增window.addEventListener('afterprint', () => window.close())：afterprint事件会在打印对话框关闭后触发，无论用户点击打印还是取消，都会执行窗口关闭操作
• 修复原代码中的CSS语法错误：将padding;0.5em;改为padding:0.5em;，确保表格内边距样式生效
• 注意：需确保浏览器允许当前页面弹出新窗口，否则打印功能无法正常触发

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