使用window.print进行前端打印，批量打印，设置分页，ie、火狐下设置页眉页脚

window.print()

print() 方法用于打印当前窗口的内容。谷歌调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。

但谷歌貌似不能自定义设置页眉页脚的文字；ie和火狐可以，如下所示

火狐：菜单-->打印

ie：文件-->打印预览，样子和上面差不多

使用或编辑打印样式的几种方式：

引入样式表

@import url("/path/print.css") print;

媒体查询：

@media print {

h1 {

font-size: 20px;

color: red;

}

}

设置打印纸张的外边距（去掉页眉页脚）:

@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 = ''

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