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