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

fix(outbound): 将@media print移至非scoped样式，解除body/html高度锁死实现自由分页

Browse Source
This commit is contained in:
DXC
2026-04-21 14:01:20 +08:00
parent 6f5a7cf0db
commit 8583b811e1
1 changed files with 82 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -848,67 +848,93 @@ const confirmExport = () => {
::v-deep(.el-card__body) { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* ================= ★★★ 打印专用样式 ★★★ ================= */
/* ================= ★★★ 打印区域排版样式 ★★★ ================= */
#print-area { display: none; }
@media print {
@page { margin: 0; size: auto; }
body * { visibility: hidden; }
.el-dialog__wrapper, .v-modal, .el-message, .no-print-content { display: none !important; }
#print-area, #print-area * { visibility: visible; }
#print-area {
position: absolute !important;
left: 0; top: 0; width: 100%;
height: auto !important;
min-height: 100%;
margin: 0; padding: 20mm; background-color: white;
display: block !important; z-index: 99999;
}
.print-header { text-align: center; margin-bottom: 20px; }
.print-header h1 { font-size: 24px; margin: 0 0 10px 0; font-weight: bold; color: #000; }
.print-meta-row { display: flex; justify-content: flex-start; font-size: 12px; margin-bottom: 5px; }
.header-line { border-bottom: 2px solid #000; margin-top: 5px; }
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; border: 1px solid #000; }
.print-table th, .print-table td { border: 1px solid #000; padding: 12px 8px; text-align: left; font-size: 14px; color: #000; }
.print-table th { text-align: center; font-weight: bold; }
.cell-padding { padding-left: 10px; }
.print-header { text-align: center; margin-bottom: 20px; }
.print-header h1 { font-size: 24px; margin: 0 0 10px 0; font-weight: bold; color: #000; }
.print-meta-row { display: flex; justify-content: flex-start; font-size: 12px; margin-bottom: 5px; }
.header-line { border-bottom: 2px solid #000; margin-top: 5px; }
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; border: 1px solid #000; }
.print-table th, .print-table td { border: 1px solid #000; padding: 12px 8px; text-align: left; font-size: 14px; color: #000; }
.print-table th { text-align: center; font-weight: bold; }
.cell-padding { padding-left: 10px; }
.print-table tr {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.print-footer { display: flex; justify-content: space-between; margin-top: 60px; padding: 0 20px; }
.signature-item { display: flex; flex-direction: column; align-items: center; width: 30%; }
.sig-label { font-size: 14px; margin-bottom: 40px; text-align: left; width: 100%; }
.sig-line { border-bottom: 1px solid #000; width: 100%; height: 1px; display: block; }
/* ★★★ 防止表格行在跨页时被水平切断 ★★★ */
.print-table tr {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.print-footer { display: flex; justify-content: space-between; margin-top: 60px; padding: 0 20px; }
.signature-item { display: flex; flex-direction: column; align-items: center; width: 30%; }
.sig-label { font-size: 14px; margin-bottom: 40px; text-align: left; width: 100%; }
.sig-line { border-bottom: 1px solid #000; width: 100%; height: 1px; display: block; }
/* ★★★ 修复预览弹窗中 el-table 打印分页截断问题 ★★★ */
.print-preview-content {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.print-preview-content .el-table,
.print-preview-content .el-table__inner-wrapper,
.print-preview-content .el-table__body-wrapper,
.print-preview-content .el-table__body {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.print-preview-content .el-scrollbar__wrap {
overflow: visible !important;
}
.print-preview-content .el-table tr {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.print-preview-content .el-table__body-wrapper is-scrollable-none {
overflow: visible !important;
}
/* ★★★ 修复预览弹窗中 el-table 打印分页截断问题 ★★★ */
.print-preview-content {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.print-preview-content .el-table,
.print-preview-content .el-table__inner-wrapper,
.print-preview-content .el-table__body-wrapper,
.print-preview-content .el-table__body {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.print-preview-content .el-scrollbar__wrap {
overflow: visible !important;
}
.print-preview-content .el-table tr {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
.print-preview-content .el-table__body-wrapper is-scrollable-none {
overflow: visible !important;
}
:deep(.bulk-clickable-row) {
cursor: pointer;
}
</style>
<style>
@media print {
/* 1. 强制重置 HTML/Body，干掉全站的滚动条和高度锁死 */
html, body, #app {
height: auto !important;
min-height: 100% !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
background-color: white !important;
}
/* 2. 隐藏所有的全局 UI（侧边栏、头部、弹窗遮罩等） */
body * {
visibility: hidden !important;
}
.el-overlay, .el-dialog__wrapper, .no-print-content {
display: none !important;
}
/* 3. 唯独让打印区域显形，并将其绝对定位到纸张左上角，脱离所有父级容器的束缚 */
#print-area, #print-area * {
visibility: visible !important;
}
#print-area {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 10mm !important;
}
/* 4. 防止表格行在跨页时被水平拦腰切断 */
.print-table tr {
page-break-inside: avoid !important;
break-inside: avoid !important;
}
}
</style>