发表新帖
发表新帖

Hide all elements except one div for print view

前端 未结
关注
9 2069
无人及你
无人及你 2020-12-10 10:38

I have the following CSS for my print style:

* {
 display:none;
}

#printableArea {
 display:block;
}
相关标签:
9条回答
  • 我寻月下人不归
    2020-12-10 10:53 
    @media print {
    * {
        visibility: hidden;
    }

    /* Show element to print, and any children he has. */
    .svgContainer, .svgContainer * {
        visibility: initial;
    }
}

    Make sure any children elements are also visible. Remember that invisible elements still influence positionning of other elements in the page. In my (simple) case, I just added position: fixed; on .svgContainer (somewhere else).

    0 讨论(0)
  • 悲&欢浪女
    2020-12-10 11:02

    If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:

    document.body.innerHTML=document.getElementById('printableArea').innerHTML;
    0 讨论(0)
  • 醉梦人生
    2020-12-10 11:03

    If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).

    * matches the <html> element, so the entire document is hidden.

    You need to be more selective about what you hide.

    0 讨论(0)
  • 清歌不尽
    2020-12-10 11:03

    Answering because I found this question while searching for this

    Instead of 'display: none' you can use :

    * {
     visibility: hidden;
     margin:0; padding:0;
    }

    #printableArea * {
      visibility: visible;
    }

    source : https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa

    0 讨论(0)
  • 忘掉有多难
    2020-12-10 11:08

    You're taking the right general approach, but you want to use visibility: hidden instead of display: none so that you can set child elements to be visible.

    See Print <div id=printarea></div> only?

    0 讨论(0)
  • 忘了有多久
    2020-12-10 11:11 
    html body * {
 display:none;
}

#printableArea {
 display:block;
}

    Also, you may need an !important on #printableArea, but probably not.

    0 讨论(0)
 看不清?
提交回复
热议问题