文章主要介紹了html 列印相關操作與實現詳解,文中透過示例程式碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
原理為呼叫 window.print() 方法,但是該方法只能對當前頁面全部列印,所以有了以下方案來解決區域性列印
1: 利用 iframe 將需要列印的元素和樣式注入 再呼叫列印
// 示例程式碼
function print () {
let ifElement = document.getElementById('ifId')
const addHtmlPrint = () => {
const content = ifElement.contentWindow || ifElement.contentDocument
content.document.body.innerHTML = this.detailTable
const styleEle = document.createElement('style')
/* 去掉列印時的頁頭和頁尾 */
styleEle.innerHTML = '@media print {@page { margin: 5mm; }}'
content.document.getElementsByTagName('head')[0].appendChild(styleEle)
/* 保障 iframe 中資源載入完成,圖片要用 img 形式引入 */
ifElement.onload = () => {
content.print()
}
}
this.getDetailTable()
if (ifElement) {
// 若已經建立,則直接列印
addHtmlPrint()
} else {
ifElement = document.createElement('iframe')
ifElement.setAttribute('id', 'ifId')
ifElement.setAttribute('style', 'display:none')
document.body.appendChild(ifElement)
addHtmlPrint()
}
}
2: 利用 @media print,在當前頁面設定列印操作時需要隱藏的元素
@media print{
/* 這裡將不需要列印的元素設定為不顯示 */
.hidden-element{
display:none;
/* visibility:hidden; */
}
/*紙張設定為寬1200px 高800px*/
@page{
size:1200px 800px;
}
}
- <link href="/example.css" media="print" rel="stylesheet" /> 標註列印時才會採用的樣式
- 監聽列印事件 window.addEventListener('beforeprint|| afterprint', ()=> {});
以上就是html 列印相關操作與實現詳解的全部內容,希望對大家的學習有所幫助