js原生打印(嵌入ifarme打印)

时间：2021-06-02 13:04:57 收藏：0 阅读：0

因最近写项目过程中遇到打印A4问题特做此练习，不当之处敬请指出

大体思路这样

先创造一个ifarme元素
然后把要打印额内容插入到ifarme中
最重要是页面加载完成时触发print方法

话不多说上代码

<!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>打印练习</title>
</head>
<body>
    <script src="./jQuery-2.2.0.min.js"></script>
    <div>
        <input type="text" id="input">
        <button id="btn">打印</button>
    </div>
    <script>
        var btn = document.getElementById("btn")
        btn.onclick = function(){
            var iframe = document.createElement("iframe");
            $(iframe).css({width: 0, height: 0});
            document.body.appendChild(iframe);
            iframe.contentWindow.document.write(`
            <!DOCTYPE html>
            <html><head><title></title><style >
                /* @media print { @page { size:A4; table:{ width:100%, height:100%}}} */
                body, div, h3 {
                    width: 840px;
                    height: 560px;
                    border: 0;
                    margin: 0;
                    padding: 0
                }

            </style></head>
            <body onload=" print();">
                <div style="background-color: aqua;">
                    <h3 style="color:red">打印练习</h3>
                    <p>第一行数据</p>
                    <p>第二行数据</p>
                    <p>第三行数据</p>
                    <p>第四行数据</p>
                </div>
            
            </body></html>
            `)
            iframe.contentWindow.document.close()
        }
    </script>
</body>
</html>