Question

我试图印刷 Chrome的细节内容,但我可以迫使它开放。

这是我印刷的科安科文中的内容:

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

但是,只有我在印刷该页前打开细节,内容才会出现。

是否有办法强迫在幼 to上印刷的剪辑细节?

Answer 1

我找到了解决办法,逼迫了与Perint和后印的开端细节。

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

Answer 2

根据克里斯托弗和本杰明的答复,我制定了以下法典:

window.matchMedia("print").addEventListener("change", evt => {
    if (evt.matches) {
        elms = document.body.querySelectorAll("details:not([open])");
        for (e of elms) {
            e.setAttribute("open", "");
            e.dataset.wasclosed = "";
        }
    } else {
        elms = document.body.querySelectorAll("details[data-wasclosed]");
        for (e of elms) {
            e.removeAttribute("open");
            delete e.dataset.wasclosed;
        }
    }
})

特征:

Restores state after the print command so that details that were already open, stay open.
Minimize DOM manipulation by only altering details that are closed.
Support DevTools print emulation by using the print media query instead of the print event handler.

Answer 3

用j Query(没有操作)找到合理的交叉浏览器解决办法。 https://www.tjvantoll.com/2008/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;

Answer 4

A simple solution in vanilla JavaScript which restores the state of opened/closed details tags after printing:

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

Answer 5

关于这一具体案件(我今天看到,但是花在StackOverflow上的时间),我认为,最好的解决办法是,在国家安全局中添加以下内容:<>详细内容> 贴在@media<<<>><>><>>>>>>>名单上,例如:

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

www.un.org/Depts/DGACM/index_spanish.htm j:(更新)

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

Answer 6

这里的答案是简便的 van。这只是通过所有<条码>细节标签打开,在印刷时打开,然后在印刷后关闭:

// Open all details tags when printing.
window.addEventListener(  beforeprint , () => {
    [].forEach.call( document.querySelectorAll(  details  ), el => el.setAttribute(  open ,    ) )
} )

// Close all details tags after printing.
window.addEventListener(  afterprint , () => {
    [].forEach.call( document.querySelectorAll(  details  ), el => el.removeAttribute(  open  ) )
} )

Answer 7

2024年,我在这里讲述了我在 Chrome、 Firefox、 Firefox和Safari对马科斯的工作,并考虑到已经开放/封闭的<条码>细节:

window.addEventListener( beforeprint , (event) => {
  for (const detailEl of document.querySelectorAll( details )) {
    if (detailEl.getAttribute( open ) == null) {
      detailEl.setAttribute( data-was-closed ,  true )
    }
    detailEl.setAttribute( open ,   )
  }
})

window.addEventListener( afterprint , (event) => {
  for (const detailEl of document.querySelectorAll( details )) {
    if (detailEl.getAttribute( data-was-closed ) != null) {
      detailEl.removeAttribute( data-was-closed )
      detailEl.removeAttribute( open )
    }
  }
})

If you don t want to use a for..of loop, you can use .forEach() with or without Array.from(), or you can use it with the array spread syntax.

// If your browser supports `.forEach()` on a `NodeList`.
// Browser support: https://caniuse.com/mdn-api_nodelist_foreach
document.querySelectorAll( details ).forEach(/* ... */)

// If you have `Array.from()` through a polyfill but not `.forEach()` on a `NodeList`.
// Browser support: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#browser_compatibility
Array.from(document.querySelectorAll( details )).forEach(/* ... */)

// If you don t have `Array.from()` but do have a transpilation method
// that can handle this `NodeList` to `Array` conversion.
// Browser support: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#browser_compatibility
[...document.querySelectorAll( details )].forEach(/* ... */)

友情链接