JS front-end printing function--native writing method (page processing, style adjustment, hidden printing scroll bar)

First upload the code directly without the help of JS plug-in
1. css style code block

     	p,
        textarea,
        span,
        table,
        input {
    
    
            page-break-inside: avoid;
        }

The key attribute page-break-inside: avoid determines the pagination checkpoint position attribute detailed value refer to MDN

2. Print preview/style on output

    <style type="text/css" media="print">
        body {
    
    
            height: auto;
            break-inside: avoid;
            line-height: 1.6;
            -webkit-print-color-adjust: exact;
            -moz-print-color-adjust: exact;
            -ms-print-color-adjust: exact;
        }

        body *::-webkit-scrollbar {
    
    
            display: none;
        }
        p,
        textarea,
        span,
        table,
        input {
    
    
            page-break-inside: avoid;
        }
    </style>

key point

1. The key point of pagination height: auto;
2. The key point to avoid the node being truncated when the page is printed page-break-inside: avoid;
3. Key points of printing background color style -webkit-print-color-adjust: exact;
4. Remove the key point of printing the scrollbar * body ::-webkit-scrollbar

3. Print API

window.print();

Print result preview