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

pvabu6sv  于 2023-01-28  发布在  Go
关注(0)|答案(6)|浏览(187)

我尝试在Chrome中打印details标签的内容,但无法强制打开。
这是我在我的打印CSS:

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

但只有在打印页面之前打开详细信息时,内容才会出现。
有没有办法强制在chrome上使用css打印打开细节?

m1m5dgzv

m1m5dgzv1#

使用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;
smdncfj3

smdncfj32#

一个简单的vanilla 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');
        }
    }
});
sq1bmfud

sq1bmfud3#

我找到了解决方案,通过使用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()
lymnna71

lymnna714#

对于这个特定的情况(我今天看到的,但在StackOverflow上需要花时间),我认为最好的解决方案是在CSS中将details标记添加到**@media print**列表中,类似于:

@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方法验证是否匹配。

**匹配:**open closed details元素,并添加属性 print 以在之后关闭。
**!匹配:**关闭具有 print 属性的详细信息元素(并删除此属性:打开并打印)

JSFiddle中查看有关此内容的详细信息

myss37ts

myss37ts5#

下面是一个简单的JavaScript代码,它循环遍历所有details标签,打印时打开所有标签,打印后关闭所有标签:

// 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' ) )
} )
nr7wwzry

nr7wwzry6#

根据Christopher和Benjamin的回答,我创建了以下代码:

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

特点:

  • 在打印命令后恢复状态,以便已打开的详细信息保持打开状态。
  • 通过只修改关闭的细节来最小化DOM操作。
  • 通过使用打印介质查询而不是打印事件处理程序来支持DevTools打印模拟。

相关问题