Force open the details / summary tag for Print in Chrome

问题

I try to print the content of the details tag in Chrome but I can't force it to open.

This is what I have in my print CSS :

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

But the content appear only if I open the details before printing the page.

Is there any way to force opening details by css print on chrome ?

回答1:

Reasonable cross-browser solution with jQuery (not Opera)...adapted from 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;

回答2:

I found the solution by forcing the opening details tag with BeforePrint and 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()

回答3:

For this specific case (which I see today, but it takes time on StackOverflow), I think the best solution to this is add in CSS the details tag to the list of @media print, something like:

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

A simple method in jQuery: (updated)

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');
            }
        });
    }
}

This printTest method verify if matches.
matches: open closed details elements and add an attribute print to close after.
!matches: close details elements with print attribute (and remove this attributes: open and print)

Looks more about this in JSFiddle

来源：https://stackoverflow.com/questions/19646684/force-open-the-details-summary-tag-for-print-in-chrome

标签

css

html

google-chrome

printing