Datatables打印问题：分页符前出现异常线条求助

嘿，我之前也碰到过类似的打印分页坑，咱们来一步步搞定它～

首先，咱们得先搞清楚问题根源：你用的Bootstrap栅格系统里，.row类默认会通过:before和:after伪元素来清除浮动，当你设置了page-break-inside: avoid后，打印时浏览器处理分页的逻辑可能会把这些伪元素渲染成奇怪的短线。另外，栅格元素的默认边距、边框或者浏览器打印时的默认样式也可能是诱因。

下面是几个针对性的解决方案，你可以逐一尝试：

1. 隐藏.row的伪元素（最常见的解决方法） #

添加打印专用的CSS，把.row的:before和:after伪元素彻底隐藏：

@media print {
  .row:before, .row:after {
    display: none !important;
  }
}

这些伪元素本来是用来处理浮动的，但打印场景下不需要它们，隐藏后就能避免大部分奇怪的线条问题。

2. 优化分页与栅格元素的样式 #

进一步调整打印时的.row和.col样式，确保分页逻辑和元素样式兼容：

@media print {
  .row {
    page-break-inside: avoid;
    page-break-after: auto;
    border: none !important; /* 移除可能存在的边框 */
    margin: 0 !important; /* 重置边距避免空白线条 */
    padding: 0 !important;
  }
  .col-xs-3 {
    page-break-inside: avoid; /* 确保单个列不会被分页截断 */
    border: none !important;
  }
}

有时候列内部的内容跨页也会触发奇怪的渲染，给.col-xs-3也加上分页保护会更稳妥。

3. 重置全局打印样式 #

浏览器打印时可能会给元素默认添加outline或box-shadow，这些也可能表现为短线，咱们一起重置掉：

@media print {
  * {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important; /* 顺便去掉背景色，省墨还避免渲染问题 */
  }
}

把这些CSS组合起来加到你的样式文件里，再测试打印预览，应该就能彻底解决那个奇怪的短线问题啦～

内容的提问来源于stack exchange，提问作者aziz