Detailed explanation of html printing related operations and implementation

The principle is to call the window.print() method, but this method can only print the entire current page, so the following solution is used to solve partial printing

1: Use iframe to inject the elements and styles that need to be printed and then call print

// Example code 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')
        /* Remove the header and footer when printing*/
        styleEle.innerHTML = '@media print {@page { margin: 5mm; }}'
        content.document.getElementsByTagName('head')[0].appendChild(styleEle)

        /* Ensure that the resources in the iframe are loaded, and the image should be imported in the form of img*/
        ifElement.onload = () => {
            content.print()
        }
    }
    this.getDetailTable()

    if (ifElement) {
        // If it has been created, print it directly addHtmlPrint()
    } else {
        ifElement = document.createElement('iframe')
        ifElement.setAttribute('id', 'ifId')
        ifElement.setAttribute('style', 'display:none')
        document.body.appendChild(ifElement)

        addHtmlPrint()
    }
}

2: Use @media print to set the elements that need to be hidden when printing on the current page

@media print{
    /* Here, set the elements that do not need to be printed to not be displayed*/
    .hidden-element{
        display:none;
        /* visibility:hidden; */
    }
    /*The paper is set to 1200px wide and 800px high*/
    @page{
        size:1200px 800px;
    }
}

<link href="/example.css" media="print" rel="stylesheet" /> Marks the style that will be used when printing
Listen for print events window.addEventListener('beforeprint|| afterprint', ()=> {});

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Detailed analysis of the chmod command to modify file permissions under Linux

>>: Introduction to fourteen cases of SQL database