需禁用 layer 的 fixed 和 shade 并提取内容至新窗口打印:设置 fixed: false、shade: 0;用 window.open 创建空白页,注入 A4 样式与纯内容 HTML,调用 print() 后关闭窗口;关键要加 page-break-inside: avoid 和 .no-print 隐藏非内容元素。

要让 layui layer 弹窗里的内容能被浏览器正确打印出来,不能直接在弹窗 DOM 上调用 window.print(),因为弹窗是浮动层、含遮罩、fixed 定位,浏览器打印时会把遮罩和背景全打满一页,正文还可能被裁掉或重复出现在每页顶部。
先关掉干扰打印的 layer 默认行为
layer 默认开启 fixed: true 和 shade: true,这两项必须禁用,否则打印预览里会出现全黑遮罩层、弹窗内容被固定到每页顶部、文字压成一团。
打开弹窗时显式设置:【fixed: false, shade: 0】。
这一步不能省——哪怕你只改了 shade: 0 而漏掉 fixed: false,打印时弹窗仍会因定位机制被复制到每一页。
把弹窗内容单独提取进一个干净的打印窗口
方法一:用 window.open() 创建新空白窗口 → 写入弹窗 HTML 字符串 → 注入 A4 打印样式 → 调用 print():
第一步:获取 layer 弹窗 body 内容(假设弹窗类型为 type:1,content 是字符串或 DOM):
const layero = layer.getChildFrame('body', index); // index 是 layer.open() 返回值
第二步:提取纯内容(去掉 layer 自带的标题栏、关闭按钮、边框等):
const contentHTML = layero.find('.layui-layer-content').html() || layero.find('body').html();
第三步:生成打印专用 HTML 文档,包含 @media print 和 @page 规则:
const printHTML = `<meta charset="utf-8">
<title>打印</title>
<style>@page { size: A4; margin: 0.5cm; } body { font-family: "Microsoft YaHei"; font-size: 12px; line-height: 1.5; } * { margin: 0; padding: 0; }</style>${contentHTML}`;
第四步:写入新窗口并打印:
const printWin = window.open('', '_blank'); printWin.document.write(printHTML); printWin.document.close(); printWin.focus(); printWin.print();
第五步:打印完成后自动关闭该窗口(可选但推荐):
setTimeout(() => printWin.close(), 500);
避免内容截断和样式错乱的关键补丁
如果弹窗里有表格或长文本,必须加 CSS 强制分页控制:
在上面的 <style></style> 块中追加:
table { page-break-inside: avoid; } th, td { page-break-inside: avoid; } .no-print { display: none !important; }
注意:layer 的标题栏、关闭按钮、阴影层默认没有 class 标识“不打印”,所以要在弹窗初始化时给它们加上 class="no-print",否则可能混进打印内容。
例如,在 layer.open() 的 success 回调里执行:
layero.siblings('.layui-layer-title, .layui-layer-close').addClass('no-print');



















