Layui表格打印样式丢失是因默认CSS仅限屏幕媒体，解决需手动注入@media print样式并处理字体、边框、背景色等；应重写table.print方法，在新窗口中写入含打印专用CSS的完整HTML。
打印时表格样式丢失，是因为 Layui 默认没加载 print CSS
layui 的 table.print 方法只是把当前表格 dom 结构克隆到一个新窗口调用 window.print()，完全不带任何样式。浏览器打印时默认只认 @media print 规则或内联 style，而 layui 的 css 都是屏幕媒体（@media screen）下生效的。
解决办法不是改 Layui 源码，而是手动注入打印专用样式：
- 在调用
table.print()前，用table.setPrintStyle()（需自行扩展）或直接操作新窗口 document 注入<style> - 样式里必须显式声明字体、边框、背景色（打印默认禁用背景色，需加
-webkit-print-color-adjust: exact） - 避免用
rem或百分比宽度——打印时渲染上下文不同，优先用pt或固定px
如何给打印窗口注入自定义 CSS
最稳妥的方式是拦截 Layui 打印逻辑，在新窗口打开后立即写入 style 标签。Layui 没暴露打印窗口引用，所以得重写 table.print 的内部行为：
// 在 layui.use('table', ...) 后执行
layui.table.print = function(id, options) {
var table = layui.table;
var config = table.config[id];
var elem = $(config.elem);
var printWin = window.open('', '_blank');
// 写入基础 HTML 和自定义样式
var html = `
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>打印</title>
<style>
@page { size: A4; margin: 0.5cm; }
body { font-family: "Microsoft YaHei", sans-serif; font-size: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #333; padding: 4px 6px; }
th { background-color: #f2f2f2; -webkit-print-color-adjust: exact; }
tr:nth-child(even) { background-color: #fafafa; -webkit-print-color-adjust: exact; }
img { max-width: 100%; height: auto; }
</style>
</head><body>` +
elem.clone().wrap('<div></div>').parent().html() +
`</body></html>`;
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
};
注意：这里用 elem.clone() 而不是原生 table.print 的 DOM 复制，能保留你表格里已有的 class 和内联样式（比如状态列的颜色）。
打印内容包含图标、头像或按钮时怎么处理
Layui 表格里常见 <i class="layui-icon"></i> 或 <img src="...">，但打印时图标可能变成方块、图片路径 404 或按钮残留。关键点：
-
layui-icon是字体图标，打印前需确保该字体文件可被新窗口访问（最好用 base64 内联或转成 SVG） - 图片建议用绝对路径或转为
data:image/png;base64,...，否则新窗口找不到相对路径 - 打印前主动移除不需要的列（如操作列），用
table.render({ cols: [...] })配合print: false字段控制，或在 clone 前用.find('.layui-table-col-special').remove() - 按钮类元素（
button、a）建议在打印样式中统一设为display: none
IE11 或旧版 Edge 下打印错位怎么办
旧浏览器对 @page 和 border-collapse 支持差，容易出现表格截断、分页错乱。实际能用的招数很有限：
- 放弃
border-collapse: collapse，改用border-spacing: 0+ 单元格独立边框 - 每页最多放 30 行，手动在数据层切片，用多个
<table>分段输出 - 禁用表头浮动（
thead { display: table-header-group; }），这是 IE 打印分页的关键兼容写法 - 避免在
th/td里用flex或position: relative，它们在打印预览里基本失效
真正麻烦的是跨页时表头不重复——浏览器原生不支持，必须靠 JS 拆表 + 每个 <table> 自带 thead，没有银弹。
