我尝试在 Chrome 中打印详细信息标签的内容,但无法强制打开。
这就是我的打印 CSS 中的内容:
details, details > * { display:block !important; }
但是只有在打印页面之前打开详细信息时才会显示内容。
有没有办法通过 chrome 上的 css print 强制打开细节?
我尝试在 Chrome 中打印详细信息标签的内容,但无法强制打开。
这就是我的打印 CSS 中的内容:
details, details > * { display:block !important; }
但是只有在打印页面之前打开详细信息时才会显示内容。
有没有办法通过 chrome 上的 css print 强制打开细节?
使用 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;
我通过使用 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()
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');
}
}
});
对于这种特定情况(我今天看到,但在 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方法验证是否匹配。
匹配:打开关闭的详细信息元素并添加属性打印以关闭之后。
!matches:关闭带有打印属性的详细信息元素(并删除此属性:打开并打印)