duxingchen/KCGL
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(outbound): 重构confirmPrint为iframe打印模式，彻底粉碎全局CSS高度锁死

Browse Source
This commit is contained in:
DXC
2026-04-21 14:35:34 +08:00
parent f53b16f512
commit dd54e047dd
1 changed files with 88 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
inventory-web/src/views/outbound/Selection.vue
View File

@ -794,6 +794,15 @@ const handlePreview = () => {
previewVisible.value = true previewVisible.value = true
} }
// 创建隐藏 iframe 用于打印
const printFrame = document.createElement('iframe');
printFrame.style.position = 'absolute';
printFrame.style.width = '0';
printFrame.style.height = '0';
printFrame.style.border = '0';
document.body.appendChild(printFrame);
const iframeDoc = printFrame.contentWindow.document;
const confirmPrint = async () => { const confirmPrint = async () => {
previewVisible.value = false; previewVisible.value = false;
// 记录日志 // 记录日志
@ -804,9 +813,85 @@ const confirmPrint = async () => {
printSelectionList(JSON.parse(JSON.stringify(payload))).catch(() => {}); printSelectionList(JSON.parse(JSON.stringify(payload))).catch(() => {});
} catch (e) {} } catch (e) {}
setTimeout(() => { // 获取 #print-area 元素和当前 computed 样式
window.print(); const printElement = document.getElementById('print-area');
}, 300); if (!printElement) return;
const styles = Array.from(document.styleSheets)
.filter(sheet => {
try { return !sheet.href || sheet.href.indexOf(window.location.host) !== -1; } catch { return false; }
})
.map(sheet => {
try {
return Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n');
} catch { return ''; }
}).join('\n');
// 4. 将提取的样式和要打印的 HTML 写入 iframe
iframeDoc.open();
iframeDoc.write(`
<!DOCTYPE html>
<html>
<head>
<title>IRIS出库拣货确认单</title>
${styles}
<style>
/* ================= 终极分页破解指令 ================= */
/* 1. 彻底粉碎所有从全局继承来的高度锁死和隐藏属性 */
html, body {
height: auto !important;
min-height: 100% !important;
max-height: none !important;
overflow: visible !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
background: white !important;
}
/* 2. 规范 A4 纸张，利用浏览器原生分页 */
@page {
size: A4 portrait;
margin: 10mm;
}
/* 3. 强制打印区化为最普通的流式元素，解除一切束缚 */
#print-area {
display: block !important;
position: static !important;
height: auto !important;
overflow: visible !important;
width: 100% !important;
margin: 0 !important;
}
/* 4. 让表格宽度自适应 A4 纸，并严禁在行中间断裂 */
.print-table {
width: 100% !important;
table-layout: auto !important;
}
.print-table tr, .print-table td, .print-table th {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
/* 5. 隐藏 Vue 拷进来的多余弹窗 UI */
.el-overlay, .el-dialog__wrapper, .no-print-content {
display: none !important;
}
</style>
</head>
<body>
${printElement.outerHTML}
</body>
</html>
`);
iframeDoc.close();
// 等 iframe 加载完毕后触发打印
printFrame.onload = () => {
printFrame.contentWindow.focus();
printFrame.contentWindow.print();
};
} }
const confirmExport = () => { const confirmExport = () => {