我尝试在Chrome中打印details标签的内容,但无法强制打开。这是我在我的打印CSS:
details, details > * { display:block !important; }
但只有在打印页面之前打开详细信息时,内容才会出现。有没有办法强制在chrome上使用css打印打开细节?
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;
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'); } } });
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()
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中查看有关此内容的详细信息
myss37ts5#
下面是一个简单的JavaScript代码,它循环遍历所有details标签,打印时打开所有标签,打印后关闭所有标签:
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' ) ) } )
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; } } })
特点:
6条答案
按热度按时间m1m5dgzv1#
使用jQuery(非Opera)的合理跨浏览器解决方案...改编自https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/:
smdncfj32#
一个简单的vanilla JavaScript解决方案,可以在打印后恢复打开/关闭的详细信息标签的状态:
sq1bmfud3#
我找到了解决方案,通过使用BeforePrint和Afterprint强制打开详细信息标签
lymnna714#
对于这个特定的情况(我今天看到的,但在StackOverflow上需要花时间),我认为最好的解决方案是在CSS中将details标记添加到**@media print**列表中,类似于:
jQuery中的一个简单方法:(最新资料)
该printTest方法验证是否匹配。
**匹配:**open closed details元素,并添加属性 print 以在之后关闭。
**!匹配:**关闭具有 print 属性的详细信息元素(并删除此属性:打开并打印)
在JSFiddle中查看有关此内容的详细信息
myss37ts5#
下面是一个简单的JavaScript代码,它循环遍历所有
details
标签,打印时打开所有标签,打印后关闭所有标签:nr7wwzry6#
根据Christopher和Benjamin的回答,我创建了以下代码:
特点: