Question

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

我目前正在使用Chrome开发工具将引导类“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浏览器，我注意到媒体查询是针对“屏幕”的，但不是用于打印。

有没有办法使用上述方法包含媒体查询以进行打印？

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

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" };
                }
            }

选择具有media属性的所有标签并将其更改为＆＃34; all＆＃34;使它们在打印视图中可见。

打印视图忽略样式表

1 个答案: