在 Chrome 中强制打开打印的详细信息/摘要标签答案

【问题标题】：Force open the details / summary tag for Print in Chrome在 Chrome 中强制打开打印的详细信息/摘要标签
【发布时间】：2013-11-07 22:14:56
【问题描述】：

我尝试在 Chrome 中打印 details 标签的内容，但无法强制打开。

这是我的打印 CSS 中的内容：

details, details > * { display:block !important; }

但只有在打印页面之前打开详细信息时才会显示内容。

有没有办法通过css print on chrome强制打开细节？

【问题讨论】：

标签： css html google-chrome printing

【解决方案1】：

我通过使用 BeforePrint 和 Afterprint 强制打开详细信息标签找到了解决方案

class App.Views.main extends backbone.View
el : "body"
events : 
    "click [data-auto-focus]":"autoFocus"
initialize : () ->
    # Add conditional classname based on support
    $('html').addClass( (if $.fn.details.support then 'details' else 'no-details'))
    $('details').details()

    if (window.matchMedia)
        mediaQueryList = window.matchMedia('print')
        mediaQueryList.addListener (mql) =>
            if (mql.matches)
                @beforePrint()
            else 
                @afterPrint()

    window.onbeforeprint = => @beforePrint
    window.onafterprint = => @afterPrint

render : () ->

openedDetailsBeforePrint : null

beforePrint : () ->
    console.log "before print"
    @openedDetailsBeforePrint = @$el.find('details[open], details.open')
    if ($('html').hasClass('no-details')) then @$el.find('details').addClass("open") else @$el.find('details').attr("open", "")

afterPrint : () ->
    console.log "after print"
    @$el.find('details').removeClass(".open").removeAttr("open")
    if ($('html').hasClass('no-details')) then @openedDetailsBeforePrint.addClass("open") else @openedDetailsBeforePrint.attr("open", "")


autoFocus : (e) ->
    $element = if (e.currentTarget) then $(e.currentTarget) else $(e.srcElement)
    return $($element.attr "data-auto-focus").focus()

【讨论】：

+1 感谢您提供适用于现代浏览器和旧浏览器的示例。

【解决方案2】：

对于这种特定情况（我今天看到，但在 StackOverflow 上需要时间），我认为最好的解决方案是在 CSS 中将 details 标记添加到 @ 列表中媒体打印，例如：

@media print {
    …
    details, details > * { display:block !important; }
}

jQuery中的一个简单方法：（更新）

var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener( printTest );

function printTest(mql) {
    dt = $( 'details' )
    if (mql.matches) {
        dt.each( function( index ){
            b = $(this).attr('open');
            if ( !b ){
                $(this).attr('open','');
                $(this).attr('print','');
            }
         });
    } else {
        dt.each( function( index ){
            b = $(this).attr('print');
            if ( !b ){
                $(this).removeAttr('open');
                $(this).removeAttr('print');
            }
        });
    }
}

这个 printTest 方法验证是否匹配。
matches: 打开 close 详细信息元素并添加属性 print em> 之后关闭。
!matches: 使用 print 属性关闭详细信息元素（并删除此属性：打开和打印）

在JSFiddle 中查看更多相关信息

【讨论】：

原始问题没有使用标签@media print，但是规则需要成功，不幸的是，这还不可能，那么你需要使用一个事件以及一种可以打印折叠细节的方法。
但是neil，你提出的js代码在打印后改变了UI... ctrl+c + ctrl-v 很简单，但是看问题的逻辑是另一个任务;这个问题是基于 CSS 的，在不久的将来 HTML&CSS 会有更多关于 details 并且答案的逻辑将是 @media print
是的，目前没有 CSS 选项，但现在有一个替代的脚本解决方案总比没有好，不是吗？
是的，neil 但是您的脚本会在打印后更改 UI 中所有细节的状态，测试我的抽象并在 opera 中进行测试。

【解决方案3】：

使用 jQuery（不是 Opera）的合理跨浏览器解决方案...改编自 https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/:

// Set up before/after handlers
var beforePrint = function() {
    $("details").attr('open', '');
};
var afterPrint = function() {
    $("details").removeAttr('open');
};

// Webkit
if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
            beforePrint();
        } else {
            afterPrint();
        }
    });
}

// IE, Firefox
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;

【讨论】：

【解决方案4】：

原生 JavaScript 中的一个简单解决方案，可在打印后恢复打开/关闭详细信息标签的状态：

// open closed details elements for printing
window.addEventListener('beforeprint',() =>
{
    const allDetails = document.body.querySelectorAll('details');
    for(let i=0; i<allDetails.length; i++)
    {
        if(allDetails[i].open)
        {
            allDetails[i].dataset.open = '1';
        }
        else
        {
            allDetails[i].setAttribute('open', '');
        }
    }
});

// after printing close details elements not opened before
window.addEventListener('afterprint',() =>
{
    const allDetails = document.body.querySelectorAll('details');
    for(let i=0; i<allDetails.length; i++)
    {
        if(allDetails[i].dataset.open)
        {
            allDetails[i].dataset.open = '';
        }
        else
        {
            allDetails[i].removeAttribute('open');
        }
    }
});

【讨论】：