使用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；

参考 https://github.com/alexwjj/vue-iframe-print