vue单页面使用window.print()多张打印

2020-04-21  本文已影响0人  刘圣凯

因为项目使用了侧边菜单,在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 会在元素后插入分页符,以此达到多张打印的效果。

上一篇 下一篇

猜你喜欢

热点阅读