使用window.print进行前端打印，批量打印，设置分页，ie、火狐下设置页眉页脚
window.print()
print() 方法用于打印当前窗口的内容。谷歌调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。
但谷歌貌似不能自定义设置页眉页脚的文字；ie和火狐可以，如下所示
火狐：菜单-->打印
ie：文件-->打印预览，样子和上面差不多
使用或编辑打印样式的几种方式：
引入样式表
<link href="/path/print.css" media="print" rel="stylesheet" />
@import url("/path/print.css") print;
媒体查询：
@media print {
h1 {
font-size: 20px;
color: red;
}
}
<style type="text/css" media="print"> // 打印样式 </style>
设置打印纸张的外边距（去掉页眉页脚）:
@page{margin:2cm 3cm;} margin若设为0，页眉页脚默认去掉了；
设置分页：在外层盒子上加上css：page-break-after:always;
打印方案：
方案一：打印指定页面区域，将指定区域dom赋值给全局innerHTML，简单粗暴；但由于打印后回到页面，页面元素卡主，无法操作，需要刷新；
function printpage(id){ var newstr = document.getElementById(id).innerHTML; var oldstr = document.body.innerHTML; document.body.innerHTML = newstr; window.print(); document.body.innerHTML = oldstr; window.location.reload() // 若不刷新，打印后页面无法操作 }
方案二：新开一个窗口，不会有刷新后返回页面无法操作问题，但不方便设置调试分页，布局样式之类的
const printWindow = window.open() printWindow.document.write(document.getElementById('printDiv')).innerHTML printWindow.print() printWindow.close()
方案三：在本页面新建iframe，不会有刷新后返回页面无法操作问题；目前用的这种；
代码中打印的css 需要将之前所有是px 的单位改为 pt ，包括border；我之前设置border:1px 打印时火狐下表格的边框有的显示了，有的显示很浅；
代码中注释地方也需要注意一下
let printHtml = document.getElementById('printDiv').innerHTML
let iframe = document.createElement('iframe')
// ie下打印时，iframe会在页面中闪一下，所以设置推出屏幕外
iframe.setAttribute('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
let ieStr = '' // 设置ie下的样式，同样设置的字体大小为18pt，ie下打印出来显示的更大，行高也是；ie下需要设置小一点
if('ActiveXObject' in window){
ieStr = 'HTML,body,div{font-size:13pt;}'+
'.lineHeight{line-height:28pt;}'
}else{
ieStr = 'HTML,body,div{font-size:18pt;}'+
'.lineHeight{line-height:40pt;}'
}
// 设置样式
// 注意点：设置了浮动元素一定要清除浮动；不然打印元素排版异常；浮动元素清除了浮动还异常则不用浮动；试试display:inline-block;
let style = '<style>'+
ieStr+
'@page{margin:2cm 3cm;}'+
// ···
// ···
// ···
'</style>'
document.body.appendChild(iframe)
iframe.contentDocument.write(style+printHtml)
iframe.contentDocument.close()
// 加延时是为了解决火狐下，打印按钮点击一次没反应，需要连续点击好多下才出个弹框提示是否阻止弹框的内容出现；
iframe.contentWindow.onload = setTimeout(() =>{
iframe.contentWindow.focus() // 兼容ie，不加这句ie默认打印还是全部的网页，不是局部创建的iframe
iframe.contentWindow.print()
document.body.removeChild(iframe)
},0)
下面两张图分别是 样式没完全用pt 和 完全用pt 且浏览器做兼容的对比
批量打印
我这里处理的比较简单粗暴，一般批量打印的数据不会太多，几十条左右，表格的一页；将要打印的几十条数据提前展示并display:none；
然后 let printHtml = document.getElementById('批量打印的盒子').innerHTML，执行上面的打印方法；
方案四：设计复杂的打印页面建议用插件；比如打印票据，包含图片，二维码的页面；可以使用hiprint；
