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

Question

我尝试在 Chrome 中打印详细信息标签的内容，但无法强制它打开。

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

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

但只有当我在打印页面之前打开详细信息时，内容才会出现。

有没有办法通过 chrome 上的 css print 强制打开详细信息？

Answer 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()