jquery + iframe 实现打印功能

yarKin.

已于 2022-06-16 11:35:40 修改

阅读量2.1k

点赞数

文章标签： jquery javascript 前端

于 2022-06-16 11:24:49 首次发布

本文链接：https://blog.csdn.net/weixin_54177757/article/details/125311795

版权

使用 window.print() 和 iframe.print() 实现html自定义页面打印功能

引入jquery文件：<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

使用window.print()打印

<body>
    <button id="printBtn">打印</button>
</body>
<script>
    $('#printBtn').click(function () {
        //定义头部样式
        var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}",
            "table{width: 100%; border-collapse: collapse; border-spacing: 0;}",
            "th,td{width:15%;line-height: 20px; border: 1px solid #ccc; text-align: center;}",
            "</style>", "</head>"].join("");
        //绘制打印页面的内容
        var v = document.createElement("div");
        var allData = [
            { username: '张三', email: '123456@asa.com', experience: '44', sex: '女' },
            { username: '李四', email: '214325@asa.com', experience: '200', sex: '男' },
            { username: '王五', email: '354534@asa.com', experience: '0', sex: '男' },
            { username: '汤六', email: '124432@asa.com', experience: '12', sex: '女' }
        ]
        //绘制自定义表格版面
        var recordTable = "<table border='1' cellspacing='0'><thead><th>用户名</th><th>邮箱</th><th>积分</th><th>性别</th></thead>";
        for (let i = 0; i < allData.length; i++) {
            let data = allData[i]
            recordTable += `<tr>
                                <td>${data.username}</td>
                                <td>${data.email}</td>
                                <td>${data.experience}</td>
                                <td>${data.sex}</td>
                            </tr>`;
        }
        recordTable += "</table>";
        //recordTable为已拼凑好的内容
        $(v).append(recordTable)

        // 新开窗口进行打印
        var h = window.open("打印窗口", "_blank");
        //拼接头部样式和打印页面内容
        h.document.write(f + $(v).prop("outerHTML"));
        h.document.close();
        h.print();
        h.close();
    })

</script>

2.使用iframe在本页面进行打印


<body>
    <button id="printBtn">打印</button>
</body>
<script>
    $('#printBtn').click(function () {
        //定义头部样式
        var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}",
            "table{width: 100%; border-collapse: collapse; border-spacing: 0;}",
            "th,td{width:15%;line-height: 20px; border: 1px solid #ccc; text-align: center;}",
            "</style>", "</head>"].join("");
        //绘制打印页面的内容
        var v = document.createElement("div");
        var allData = [
            { username: '张三', email: '123456@asa.com', experience: '44', sex: '女' },
            { username: '李四', email: '214325@asa.com', experience: '200', sex: '男' },
            { username: '王五', email: '354534@asa.com', experience: '0', sex: '男' },
            { username: '汤六', email: '124432@asa.com', experience: '12', sex: '女' }
        ]
        //绘制自定义表格版面
        var recordTable = "<table border='1' cellspacing='0'><thead><th>用户名</th><th>邮箱</th><th>积分</th><th>性别</th></thead>";
        for (let i = 0; i < allData.length; i++) {
            let data = allData[i]
            recordTable += `<tr>
                                <td>${data.username}</td>
                                <td>${data.email}</td>
                                <td>${data.experience}</td>
                                <td>${data.sex}</td>
                            </tr>`;
        }
        recordTable += "</table>";
        //recordTable为已拼凑好的内容
        $(v).append(recordTable)

        const iframe = document.createElement('iframe');
        iframe.style = "position: absolute;top: 0;left: 0;z-index:-1;display:none";
        let doc = null;
        iframe.id = 'printIframe';
        document.body.appendChild(iframe);
        doc = iframe.contentWindow.document;

        //注意这里拼接样式和页面内容
        doc.write(f + $(v).prop("outerHTML"));
        doc.close();

        // 获取iframe的焦点，从iframe开始打印
        iframe.contentWindow.focus();
        iframe.contentWindow.print();

        //打印完毕后移除iframe
        iframe.parentNode.removeChild(iframe);
    })

</script>