css - 打印 View 忽略样式表

Question

我在 Ruby on Rails 元素中使用 JQuery DataTables，它确实有一个很棒的扩展 Buttons。这可以导出为 PDF、打印、Excel 或 CVS，还支持 Bootstrap 。

我目前正在使用 Chrome 开发工具直接将 Bootstrap 类“table table-striped table-bordered”添加到标签中，然后运行以下代码片段:

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 预览打印时，样式 .css( 'border-color, 'gray' ) 应用于 'td' 标签被完全忽略。

我怀疑问题与 Bootstrap 有关，我观察了 Chrome 检查器，我注意到媒体查询是针对“屏幕”的，而不是针对打印的。

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

更新:在阅读了 W3School 的打印媒体查询示例并在 JsBin 中执行代码后，我发现只需添加 Bootstrap 库，媒体查询打印就会停止工作。有没有办法覆盖这种行为？快把我逼疯了。

Answer 1

显然，bootstrap 在打印 View 中默认加载了标签 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" };
                }
            }

这会选择所有具有媒体属性的标签并将它们更改为“全部”以使它们在打印 View 中可见。