文章主要介紹了html 打印相關(guān)操作與實(shí)現(xiàn)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

原理為調(diào)用 window.print() 方法，但是該方法只能對當(dāng)前頁面全部打印，所以有了以下方案來解決局部打印

1: 利用 iframe 將需要打印的元素和樣式注入 再調(diào)用打印

// 示例代碼
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')
        /* 去掉打印時(shí)的頁頭和頁腳 */
        styleEle.innerHTML = '@media print {@page { margin: 5mm; }}'
        content.document.getElementsByTagName('head')[0].appendChild(styleEle)
 
        /* 保障 iframe 中資源加載完成，圖片要用 img 形式引入 */
        ifElement.onload = () => {
            content.print()
        }
    }
    this.getDetailTable()
 
    if (ifElement) {
        // 若已經(jīng)創(chuàng)建，則直接打印
        addHtmlPrint()
    } else {
        ifElement = document.createElement('iframe')
        ifElement.setAttribute('id', 'ifId')
        ifElement.setAttribute('style', 'display:none')
        document.body.appendChild(ifElement)
 
        addHtmlPrint()
    }
}

2: 利用 @media print，在當(dāng)前頁面設(shè)置打印操作時(shí)需要隱藏的元素

@media print{
    /* 這里將不需要打印的元素設(shè)置為不顯示 */
    .hidden-element{
        display:none;
        /* visibility:hidden; */
    }
    /*紙張?jiān)O(shè)置為寬1200px 高800px*/
    @page{
        size:1200px 800px;
    }
}

• <link href="/example.css" media="print" rel="stylesheet" /> 標(biāo)注打印時(shí)才會采用的樣式
• 監(jiān)聽打印事件 window.addEventListener('beforeprint|| afterprint', ()=> {});

以上就是html 打印相關(guān)操作與實(shí)現(xiàn)詳解的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助