使用DataTable打印表格时边框缺失/不显示的问题求助

嘿，这个DataTables打印边框异常的问题我之前碰到过好多次，大概率是打印专属的CSS没设置到位，或者表格宽度超出了打印页面范围导致的。给你几个实测有效的解决办法：

1. 给打印状态下的表格强制添加边框样式 #

DataTables的打印功能会生成一个独立的新窗口，里面的表格未必能继承你页面里的边框样式，所以得专门写打印媒体查询的CSS来覆盖：

@media print {
  table.dataTable,
  table.dataTable th,
  table.dataTable td {
    border: 1px solid #000 !important;
    border-collapse: collapse !important;
  }
  table.dataTable {
    width: 100% !important;
    table-layout: fixed !important;
  }
}

这里的!important是为了压过DataTables自带的打印样式，table-layout: fixed能避免表格宽度溢出打印区域——你第一页最右侧边框缺失，很大概率就是表格宽度超了被截断了。

2. 在打印按钮里自定义注入样式 #

如果上面的全局CSS没生效，你可以直接在DataTables的打印按钮配置里，给弹出的打印窗口注入专属样式：

$('.dataTables-example').DataTable({
  pageLength : 25,
  responsive : true,
  dom : '<"html5buttons"B>lTfgitp',
  buttons : [
    { extend : 'copyHtml5'},
    {
      extend: 'print',
      customize: function (win) {
        // 给打印窗口的头部添加自定义样式
        $(win.document.head).append('<style>' +
          'table, th, td { border: 1px solid #000 !important; border-collapse: collapse !important; }' +
          'table { width: 100% !important; table-layout: fixed !important; }' +
        '</style>');
      }
    }
    // 其他按钮配置...
  ]
});

customize函数可以让你直接修改打印窗口的DOM内容，这种方式的优先级更高，能确保样式生效。

3. 排查全局CSS冲突 #

有时候你页面里的全局样式会干扰打印，比如给body加了overflow-x: hidden，或者给表格容器加了奇怪的外边距，导致打印时表格被截断。可以试试在打印媒体查询里重置这些属性：

@media print {
  body {
    overflow: visible !important;
  }
  .dataTables-example {
    margin: 0 !important;
    padding: 0 !important;
  }
}

额外小技巧：调整打印缩放比例 #

如果表格实在太宽，打印时自动缩放导致边框丢失，你可以在customize里手动设置缩放比例：

$(win.document.body).css('zoom', '80%'); // 根据你的表格宽度调整数值

这些方法应该能解决你遇到的边框问题，先从第一种开始试，不行再换后面的~

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