打印视图忽略样式表

Question

我在Ruby on Rails项目中使用了JQuery DataTables，它确实有一个美妙的扩展按钮。这可以导出到PDF，打印，Excel或CVS，也支持引导。

我目前使用的Chrome浏览器开发工具直接添加自举类“table表条纹表镶上”标签，然后运行下面的代码片段：

var tabla = $('#example').DataTable({ 
    dom: 'Bfrtip', 
    buttons: [ 
     { 
      extend: 'print', 
      autoPrint: false, 
      customize: function (win) { 
       $(win.document.body) 
        .css('font-size', '10pt') 
        .prepend(
         '<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />' 
        ); 

       $(win.document.body).find('td') 
        .addClass('compact') 
        .css('font-size', 'inherit') 
        .css('border-color, 'gray' ); 
      } 
     } 
    ] 
}); 

不幸的是，打印预览根本没有风格。打印按钮用自定义样式（通过.css方法）打开一个新窗口并且没问题，当你点击ctrl-p预览打印时，问题是，应用于'td'标签的样式.css('border-color, 'gray' )完全被忽略。

我怀疑问题与bootstrap有关，我注意到Chrome Inspector，并且我注意到媒体查询是针对“屏幕”的，但不是用于打印。

有没有一种方法可以使用上面的方法包含打印的媒体查询？

更新：在阅读W3Schools的打印媒体查询示例并在JsBin中执行代码后，我发现仅通过添加引导程序库，媒体查询打印即停止工作。有没有办法重写该行为？正在让我发疯。

Answer 1

显然，引导默认情况下，在打印预览装有标签media="screen"，所以重写此的唯一途径是通过自定义添加此：

{ 
       extend: 'print', 
       autoPrint: true, 
       customize: function (win) { 
        $(win.document.body) 
         .css('font-size', '10pt'); 

        $(win.document.body).find('table') 
         .addClass('compact') 
         .css('font-size', 'inherit'); 
        var medias = win.document.querySelectorAll('[media="screen"]'); 
        for(var i=0; i < medias.length;i++){ medias.item(i).media="all" }; 
       } 
      } 

，其选择具有媒体属性，所有标签将它们更改为“全部”，以使它们在打印视图中可见。