打印(jq代码)

原创已于 2023-01-03 16:06:05 修改 · 317 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#javascript #前端 #servlet
于 2023-01-03 16:04:50 首次发布
该HTML代码示例展示了如何使用jQuery创建一个简单的页面，其中包含一个按钮。当用户点击按钮时，会调用一个函数打印包含多个项目（如阀组、润滑油等）的维修费用表格。表格结构预设了从2022年12月20日至24日的每日费用，目前所有费用均为0。
<!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>
    <script src="./jquery-3.6.1.js"></script>
</head>

<body>
    <button id="app">打印</button>
    <script>
        $('document').ready(function () {
            let arr1 = [{ "PJName": "德国进口阀组", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "阀组", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "后导向套", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "极速", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "晋级赛", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "美国进口润滑油", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "皮带", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "前导向套", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "曲轴油封", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "日本进口润滑油", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "润滑油", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "填料", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }, { "PJName": "新增易损件", "2022-12-24维修费用": 0, "2022-12-23维修费用": 0, "2022-12-22维修费用": 0, "2022-12-21维修费用": 0, "2022-12-20维修费用": 0, "2022-12-19维修费用": 0, "2022-12-18维修费用": 0 }]
            let arr2 = [[{ "title": "易损件名称", "type": "normal", "width": "260", "rowspan": 1, "colspan": 1, "hide": false, "sort": false, "minWidth": "260", "field": "PJName", "key": "0-1" }, { "title": "2022-12-24维修费用", "type": "normal", "width": "200", "rowspan": 1, "colspan": 1, "hide": false, "sort": true, "minWidth": "200", "field": "2022-12-24维修费用", "key": "0-2" }, { "title": "2022-12-23维修费用", "type": "normal", "width": "200", "rowspan": 1, "colspan": 1, "hide": false, "sort": true, "minWidth": "200", "field": "2022-12-23维修费用", "key": "0-3" }, { "title": "2022-12-22维修费用", "type": "normal", "width": "200", "rowspan": 1, "colspan": 1, "hide": false, "sort": true, "minWidth": "200", "field": "2022-12-22维修费用", "key": "0-4" }, { "title": "2022-12-21维修费用", "type": "normal", "width": "200", "rowspan": 1, "colspan": 1, "hide": false, "sort": true, "minWidth": "200", "field": "2022-12-21维修费用", "key": "0-5" }, { "title": "2022-12-20维修费用", "type": "normal", "width": "200", "rowspan": 1, "colspan": 1, "hide": false, "sort": true, "minWidth": "200", "field": "2022-12-20维修费用", "key": "0-6" }, { "title": "2022-12-19维修费用", "type": "normal", "width": "200", "rowspan": 1, "colspan": 1, "hide": false, "sort": true, "minWidth": "200", "field": "2022-12-19维修费用", "key": "0-7" }, { "title": "2022-12-18维修费用", "type": "normal", "width": "200", "rowspan": 1, "colspan": 1, "hide": false, "sort": true, "minWidth": "200", "field": "2022-12-18维修费用", "key": "0-8" }]]
            function print(res, cols) {
                var v = document.createElement("div");
                var f = ["<head>", "<style>", "body{font-size: 12px; color: #666;}", "table{width: 100%; border-collapse: collapse; border-spacing: 0;}", "th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: center; font-size: 12px; color: #666;}", "a{color: #666; text-decoration:none;}", "*.layui-hide{display: none}", "</style>", "</head>"].join("");
                thead = `<table><thead><tr>`;
                if (!cols[0]) {
                    return
                }
                cols[0].filter((item) => {
                    if (item.title == "序号") {
                        cols[0].shift()
                    }
                })
                for (let v2 of cols[0]) {
                    if ((v2.type == 'checkbox') || v2.hasOwnProperty('toolbar')) {
                        thead += `<th class="layui-table-col-special"  style="background-color:green;">空列</th>`
                    } else {
                        thead += `<th  style="background-color:green;">${v2.title}</th>`
                    }
                }
                thead += `</tr></thead></table>`

                console.log()

                $(v).append(thead);
                var tr = `<tbody>`
                for (let v of res) {
                    tr += '<tr>'
                    for (let v2 of cols[0]) {
                        if ((v2.type == 'checkbox') || v2.hasOwnProperty('toolbar')) {
                            tr += `<td class="layui-table-col-special"></td>`
                        } else if ((v2.type == 'numbers')) {
                            tr += `<td>${v2}</td>`
                        }
                        else {
                            var field = v2.field ?? 'id'
                            tr += `<td>${v[field]}</td>`
                        }
                    }
                    tr += '</tr></tbody>'
                }
                $(v).find('tr').after(tr)
                $(v).find("th.layui-table-patch").remove();
                $(v).find(".layui-table-col-special").remove();
                var h = window.open("打印窗口", "_blank");
                h.document.write(f + $(v).prop("outerHTML"));
                h.document.close();
                h.print();
                h.close();
            }
            $("#app").on('click', function () {
                print(arr1, arr2)
            })
        });
    </script>
</body>

</html>
效果: