winodw.print()方法

print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.querySelector(‘print’) 也可以达到同样的效果。默认打印页面中body里的所有内容。

最简单的使用，直接window.print()就可以，当然，document.execCommand(‘print’) 也可以达到同样的效果。

代码示例 ：

// 这里我们是对局部打印做的演示
// 首先获取局部html，也就是打印的区域
const printHTML = document.querySelector('#printId').innerHTML; 
// 将打印的区域赋值，进行打印
window.document.body.innerHTML = printHTML;
window.print(); // 调用window打印方法
window.location.reload(); // 打印完成后重新加载页面

事件监听

有两个事件可以监听到到打印事件，一个是beforeprint,一个是afterprint，分别表示打印事件触发前后。
这个事件在 IE6 就已经支持了，兼容大概是 Firefox、IE全支持, Chrome63+支持, Safari暂不支持

我们可在处理事件onbeforeprint() 将一些不需要打印的元素隐藏，和打印后的处理事件 onafterprint()放开隐藏的元素

window.addEventListener('beforeprint', ()=> {
  document.body.innerHTML = '打印前触发';
});

window.addEventListener('afterprint', ()=> {
  document.body.innerHTML = '打印后触发';
});

设置打印布局（横向、纵向、边距）

 @media print {
    @page {
      // 纵向
      size: portrait; 
 
     // 横向
      size: landscape;
 
      // 边距
      margin: 0cm 0cm 0cm 0cm;
    }
  }

去除浏览器默认页眉页脚

页眉打印默认有页眉页脚信息，展现到页面外边距范围，我们可以通过去除页面模型page的外边距，使得内容不会延伸到页面的边缘，再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距

@media print {
  @page {
    margin: 0;
  }
  body {
    margin: 1cm;
  }
}

注意：
如果打印整个网页，会打印document下所有可见元素， 包括

里面的背景不会被打印，包括背景色啊背景图片等如果图片是懒加载的，需要额外处理，不然打印直接空白

注 ：如上方法，可实现打印，但是由于局部打印window.document.body.innerHTML = printHTML; window.location.reload(); // 打印完成后重新加载页面 所以会导致我们整个页面被覆盖。如果你的项目中使用了vuex，重新加载页面会使你的状态管理丢失。

window.open(); 新窗口打印

我们其实还可以使用新窗口打印，将要打印的HTML，赋值给新窗口的body，打印之后我们再将之关闭。

这里我们window.open(URL,name,specs,replace)；暂不多做介绍

// 获取局部html，也就是打印的区域
const printHTML = document.querySelector('#printId').innerHTML; 
// 将打印的区域赋值给新窗口body，进行打印
const newWindow = window.open('','');
newWindow.document.write(printHTML);
newWindow.window.print();
newWindow.window.close();  // 打印完成后关闭后新窗口

————————————————
原文链接：https://blog.csdn.net/weixin_52400118/article/details/114383705