打印视图忽略样式表

Posted 2023-03-06

【中文标题】打印视图忽略样式表

【英文标题】：Print view ignores stylesheet

【发布时间】：2015-11-11 20:06:48

【问题描述】：

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

我目前正在使用Chrome Dev Tools直接将引导类“table table-striped table-bordered”添加到标签中，然后运行以下代码sn-p：

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' ) 完全忽略。

我怀疑问题与引导程序有关，我查看了 Chrome Inspector，发现媒体查询是针对“屏幕”的，而不是针对打印的。

有没有办法使用上述方法包含用于打印的媒体查询？

更新：在阅读了来自 W3Schools 的用于打印的媒体查询示例并在 JsBin 中执行代码后，我发现仅通过添加引导库，媒体查询打印停止工作。有没有办法覆盖这种行为？快把我逼疯了。

【参考方案1】：

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

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

【讨论】：

我在打印时遇到问题，请您帮帮我***.com/questions/56776387/…