fix(outbound): 终极护航版confirmPrint，iframe克隆样式+强制分页CSS
This commit is contained in:
@ -23,7 +23,7 @@
|
|||||||
批量操作
|
批量操作
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" :disabled="selectedItems.length === 0" @click="clearAll">
|
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" :disabled="selectedItems.length === 0" @click="clearAll">
|
||||||
清空货车
|
清空列表
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-divider direction="vertical" />
|
<el-divider direction="vertical" />
|
||||||
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Plus" @click="openManualSelect">
|
<el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Plus" @click="openManualSelect">
|
||||||
@ -794,18 +794,9 @@ 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;
|
||||||
// 记录日志
|
|
||||||
try {
|
try {
|
||||||
const payload = validSelectedItems.value.map(item => ({
|
const payload = validSelectedItems.value.map(item => ({
|
||||||
name: item.name, standard: item.standard, quantity: item.export_quantity
|
name: item.name, standard: item.standard, quantity: item.export_quantity
|
||||||
@ -813,85 +804,89 @@ const confirmPrint = async () => {
|
|||||||
printSelectionList(JSON.parse(JSON.stringify(payload))).catch(() => {});
|
printSelectionList(JSON.parse(JSON.stringify(payload))).catch(() => {});
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
|
|
||||||
// 获取 #print-area 元素和当前 computed 样式
|
setTimeout(() => {
|
||||||
const printElement = document.getElementById('print-area');
|
// 1. 获取要打印的区域 DOM
|
||||||
if (!printElement) return;
|
const printElement = document.getElementById('print-area');
|
||||||
const styles = Array.from(document.styleSheets)
|
if (!printElement) return;
|
||||||
.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
|
// 2. 创建并挂载隐藏的 iframe
|
||||||
iframeDoc.open();
|
const iframe = document.createElement('iframe');
|
||||||
iframeDoc.write(`
|
iframe.style.position = 'fixed';
|
||||||
<!DOCTYPE html>
|
iframe.style.right = '0';
|
||||||
<html>
|
iframe.style.bottom = '0';
|
||||||
<head>
|
iframe.style.width = '0';
|
||||||
<title>IRIS出库拣货确认单</title>
|
iframe.style.height = '0';
|
||||||
${styles}
|
iframe.style.border = '0';
|
||||||
<style>
|
document.body.appendChild(iframe);
|
||||||
/* ================= 终极分页破解指令 ================= */
|
|
||||||
/* 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. 强制打印区化为最普通的流式元素，解除一切束缚 */
|
const iframeDoc = iframe.contentWindow?.document || iframe.contentDocument;
|
||||||
#print-area {
|
if (!iframeDoc) return;
|
||||||
display: block !important;
|
|
||||||
position: static !important;
|
|
||||||
height: auto !important;
|
|
||||||
overflow: visible !important;
|
|
||||||
width: 100% !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 4. 让表格宽度自适应 A4 纸，并严禁在行中间断裂 */
|
// 3. 安全初始化 iframe 骨架（只写基本结构，不拼接任何业务代码）
|
||||||
.print-table {
|
iframeDoc.open();
|
||||||
width: 100% !important;
|
iframeDoc.write('<!DOCTYPE html><html><head><title>出库单打印</title></head><body></body></html>');
|
||||||
table-layout: auto !important;
|
iframeDoc.close();
|
||||||
}
|
|
||||||
.print-table tr, .print-table td, .print-table th {
|
|
||||||
page-break-inside: avoid !important;
|
|
||||||
break-inside: avoid !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 5. 隐藏 Vue 拷进来的多余弹窗 UI */
|
// 4. 【核心修复】安全克隆所有样式节点，彻底告别乱码
|
||||||
.el-overlay, .el-dialog__wrapper, .no-print-content {
|
const styles = document.querySelectorAll('style, link[rel="stylesheet"]');
|
||||||
display: none !important;
|
styles.forEach(styleNode => {
|
||||||
}
|
iframeDoc.head.appendChild(styleNode.cloneNode(true));
|
||||||
</style>
|
});
|
||||||
</head>
|
|
||||||
<body>
|
// 5. 动态追加针对打印的强制分页 CSS
|
||||||
${printElement.outerHTML}
|
const customStyle = iframeDoc.createElement('style');
|
||||||
</body>
|
customStyle.innerHTML = `
|
||||||
</html>
|
/* 重置基础布局，解除所有高度死锁 */
|
||||||
`);
|
html, body {
|
||||||
iframeDoc.close();
|
height: auto !important;
|
||||||
|
min-height: 100% !important;
|
||||||
// 等 iframe 加载完毕后触发打印
|
overflow: visible !important;
|
||||||
printFrame.onload = () => {
|
background: white !important;
|
||||||
printFrame.contentWindow.focus();
|
margin: 0;
|
||||||
printFrame.contentWindow.print();
|
padding: 0;
|
||||||
};
|
}
|
||||||
|
/* 规范 A4 纸张 */
|
||||||
|
@page {
|
||||||
|
size: A4 portrait;
|
||||||
|
margin: 10mm;
|
||||||
|
}
|
||||||
|
/* 确保打印区正常流式显示 */
|
||||||
|
#print-area {
|
||||||
|
display: block !important;
|
||||||
|
position: static !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
/* 核心：保护表格不被跨页截断 */
|
||||||
|
.print-table {
|
||||||
|
width: 100% !important;
|
||||||
|
table-layout: auto !important;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.print-table tr, .print-table td, .print-table th {
|
||||||
|
page-break-inside: avoid !important;
|
||||||
|
break-inside: avoid !important;
|
||||||
|
}
|
||||||
|
/* 隐藏不需要的全局 UI */
|
||||||
|
.el-overlay, .el-dialog__wrapper, .no-print-content {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
iframeDoc.head.appendChild(customStyle);
|
||||||
|
|
||||||
|
// 6. 【核心修复】安全克隆打印区域到 body 中
|
||||||
|
iframeDoc.body.appendChild(printElement.cloneNode(true));
|
||||||
|
|
||||||
|
// 7. 延迟触发打印，等待样式完全渲染
|
||||||
|
setTimeout(() => {
|
||||||
|
iframe.contentWindow?.focus();
|
||||||
|
iframe.contentWindow?.print();
|
||||||
|
// 打印结束后清理 iframe
|
||||||
|
setTimeout(() => {
|
||||||
|
document.body.removeChild(iframe);
|
||||||
|
}, 1000);
|
||||||
|
}, 500); // 预留 500ms 渲染时间
|
||||||
|
}, 300);
|
||||||
}
|
}
|
||||||
|
|
||||||
const confirmExport = () => {
|
const confirmExport = () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user