在DataTable中保留特定列的CSS用于打印

Keep CSS of certain column in DataTable for print

本文关键字:CSS 用于 打印 DataTable 保留      更新时间:2023-09-26

我使用的是带有打印插件的数据表,在一列中,我有一些在桌面上看起来不错的模式,但当我打印它时,CSS被删除了。

我的JS看起来像这样

$('table').DataTable({
  dom: 'Bfrtip',
  buttons: [{
      extend: 'print',
      customize: function(win) {
        $(win.document.body)
          .css('font-size', '10pt');
        $(win.document.body).find('table')
          .addClass('compact')
          .css('font-size', 'inherit');
      },
      exportOptions: {
        columns: ':visible'
      }
    },
    'colvis'
  ]
});

完整的例子在这里https://jsfiddle.net/eza27o58/

schema在User列下。

是否有办法保持该列的CSS打印,使整个架构是可见的?

在exportOptions中设置stripHtml为false。CSS没有被删除,只是div和strong标签被删除了。

$('table').DataTable({
  dom: 'Bfrtip',
  buttons: [{
      extend: 'print',
      customize: function(win) {
        $(win.document.body)
          .css('font-size', '10pt');
        $(win.document.body).find('table')
          .addClass('compact')
          .css('font-size', 'inherit');
      },
      exportOptions: {
        columns: ':visible',
        stripHtml: false
      }
    }
  ]
});

你的例子的分支:https://jsfiddle.net/snxb9ay0/