<!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>
效果: