强制在Chrome中打开用于打印的详细信息/摘要标签 [英] Force open the details / summary tag for Print in Chrome
本文介绍了强制在Chrome中打开用于打印的详细信息/摘要标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试在Chrome中打印details标签的内容,但无法强制打开。
I try to print the content of the details tag in Chrome but I can't force it to open.
这是我在打印CSS中所拥有的:
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.
有没有办法通过chrome上的css打印强制打开细节?
Is there any way to force opening details by css print on chrome ?
推荐答案
I通过使用BeforePrint和Afterprint强制打开开始标签来找到解决方案
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()
这篇关于强制在Chrome中打开用于打印的详细信息/摘要标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文