console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .print-box .title {
            text-align: center;
        }

        .clear::after {
            content: "";
            display: table;
            overflow: hidden;
            clear: both;
        }

        .print-box {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .left {
            /* float: left; */
        }

        .left p {
            margin: 0;
            line-height: 1.25em;
        }

        .right {
            /* float: right; */
        }

        .img {
            width: 60%;
        }


        .print-btn {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="print-box clear" id="printBox">
        <!-- <h4>页面中需要打印的内容</h4> -->
        <div class="left">
            <h4 class="title">少年泪</h4>

            <p>水皱皱 沙迢迢 红尘意未了</p>
            <p>有多少往事心头缠绕</p>
            <p>对与错 空计较 输赢都一笑</p>
            <p>只恨这轻狂不年少</p>
            <p>想那些炎凉冷暖闲言碎语人情太劣卑</p>
            <p>是谁教我无须去理会</p>
            <p>哪怕再多疼痛委屈也都无所谓</p>
            <p>放胆再一回</p>
            <p>逾地狭天小蜕骨换魄历经磨难不后退</p>
            <p>浴火重生终要去面对</p>
            <p>为约定 我不知疲惫</p>
            <p>少年泪 从不坠 也可贵</p>
            <p>纵是百般滋味 都随血脉腾沸</p>
            <p>要在梦底燃起火照亮天黑</p>
            <p>许她年岁</p>
            <p>少年泪 到天涯 都无悔</p>
            <p>宁愿孤注一掷 不愿徒然伤悲</p>
            <p>让雨打湿翅膀 再振翅高飞</p>
            <p>水皱皱 沙迢迢 无处不喧嚣</p>
            <p>有多少海市蜃景纷扰</p>
            <p>对与错 空计较 又何惧跌倒</p>
            <p>只盼这斗气比天高</p>
            <p>少年泪 从不坠 也可贵</p>
            <p>纵是百般滋味 都随血脉腾沸</p>
            <p>要在梦底燃起火照亮天黑</p>
            <p>许她年岁</p>
            <p>少年泪 到天涯 都无悔</p>
            <p>宁愿孤注一掷 不愿徒然伤悲</p>
            <p>让雨打湿翅膀 再振翅高飞</p>
            <p>少年泪 如跌坠 也干脆</p>
            <p>从不稀罕暧昧 只有好坏是非</p>
            <p>要逾过荒山大漠才能摹绘</p>
            <p>焚心烧肺</p>
            <p>少年泪 清风随 似流岁</p>
            <p>总是匆匆又去 不待绿销红褪</p>
            <p>莫使佳人憔悴 负弹指芬菲</p>
            <p>让雨打湿翅膀 再振翅高飞</p>
        </div>
        <div class="right">
            <img class="img" src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4DMeN?ver=4127" alt="">
        </div>
    </div>

    <button class="print-btn" id="printBtn">打印</button>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, totam necessitatibus. Molestiae, ex. Assumenda,
        totam? Explicabo excepturi porro ullam voluptas ipsum, laborum esse sequi, perferendis, neque animi sapiente
        itaque quas.</p>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum deserunt, totam molestiae commodi nesciunt
        voluptate libero beatae facilis labore animi magnam porro assumenda, voluptatum quis aliquid iste neque mollitia
        laboriosam!</p>

    <script>
        function printFn() {
            let iframe = document.getElementById('printIframe')

            if (!iframe) {
                const el = document.getElementById('printBox')
                iframe = document.createElement('IFRAME')
                let doc = null
                iframe.setAttribute('id', 'printIframe')

                iframe.setAttribute('style', 'position: absolute; width: 0px; height: 0px; left: -200px; top: -200px;')
                // iframe.setAttribute('style', 'position: absolute; width: 841px; height: 1189px; left: 0px; top: 0px;')

                document.body.appendChild(iframe)
                doc = iframe.contentWindow.document

                doc.write('<link rel="stylesheet" type="text/css" href="css/print.css">')
                doc.write('<div class="print-box clear">' + el.innerHTML + '</div>')
                doc.close()

                iframe.contentWindow.focus()

            }

            iframe.onload = function () {
                console.log('iframe loaded!')
                iframe.contentWindow.print()
            }


            if (navigator.userAgent.indexOf('MSIE') > 0) {
                document.body.removeChild(iframe)
            }

        }

        const printBtn = document.getElementById('printBtn')
        printBtn.addEventListener('click', function () {
            printFn()
        })
    </script>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}
body {
    background: rgba(32, 33, 36, 0.1);
}

.print-box {
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 24px 0;
}

.print-box .title {
    text-align: center;
    line-height: 1.6em;
}

.clear::after {
    content: "";
    display: table;
    overflow: hidden;
    clear: both;
}

.left {
    /* float: left; */
}

.left p {
    line-height: 1.5em;
}

.right {
    /* float: right; */
    width: 50%;
}

.img {
    width: 100%;
}