因為項目使用了側(cè)邊菜單,在vue單頁面中無法精準(zhǔn)控制打印的數(shù)據(jù),總是會把側(cè)邊欄給一起打印出來, 所以使用原生的方式,生成一個新的窗口去打印, 實例如下
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); // 打印內(nèi)容
newWin.document.close(); //在IE瀏覽器中使用必須添加這一句
newWin.focus(); //在IE瀏覽器中使用必須添加這一句
setTimeout(function() {
newWin.print(); //打印
newWin.close(); //關(guān)閉窗口
}, 100);
div
中的行內(nèi)樣式 page-break-after:always
會在元素后插入分頁符,以此達到多張打印的效果。