因为项目使用了侧边菜单,在vue单页面中无法精准控制打印的数据,总是会把侧边栏给一起打印出来, 所以使用原生的方式,生成一个新的窗口去打印, 实例如下
let htmlStr = `
<div style="page-break-after:always;">第一页</div>
<div style="page-break-after:always;">第二页</div>
`
let newWin = window.open(""); //新打开一个空窗口
let imageToPrint = document.getElementById('print'); //将要被打印的图片
newWin.document.write(htmlStr); // 打印内容
newWin.document.close(); //在IE浏览器中使用必须添加这一句
newWin.focus(); //在IE浏览器中使用必须添加这一句
setTimeout(function() {
newWin.print(); //打印
newWin.close(); //关闭窗口
}, 100);
div
中的行内样式 page-break-after:always
会在元素后插入分页符,以此达到多张打印的效果。