html 打印相關(guān)操作與實(shí)現(xiàn)詳解

2024-08-26 00:14:02

字體：大中小

供稿：網(wǎng)友

原理為調(diào)用 window.print() 方法，但是該方法只能對(duì)當(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í)才會(huì)采用的樣式
監(jiān)聽打印事件 window.addEventListener('beforeprint|| afterprint', ()=> {});

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。

上一篇：淺析html網(wǎng)頁基本概念

下一篇：html隨意拖動(dòng)內(nèi)容位置的兩種實(shí)現(xiàn)方式