Print div id printarea div only

Question

How do I print the indicated div  without manually disabling all other content on the page    I want to avoid a new preview dialog  so creating a new window with this content is not useful   The page contains a couple of tables  one of them contains the div I want to print - the table is styled with visual styles for the web  that should not show in print

User · Answer

hm     use the type of a stylsheet for printing     eg    lt link rel  stylesheet  type  text css  href  print css  media  print    gt    print css   div   display  none     yourdiv   display  block

User · Answer

Step 1  Write the following javascript inside your head tag   lt script language  javascript  gt  function PrintMe DivID    var disp setting  toolbar yes location no    disp setting   directories yes menubar yes    disp setting   scrollbars yes width 650  height 600  left 100  top 25      var content vlue   document getElementById DivID  innerHTML     var docprint window open       disp setting      docprint document open       docprint document write   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN        docprint document write   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt        docprint document write   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt        docprint document write   lt head gt  lt title gt My Title lt  title gt        docprint document write   lt style type  text css  gt body  margin 0px        docprint document write  font-family verdana Arial color  000        docprint document write  font-family Verdana  Geneva  sans-serif  font-size 12px         docprint document write  a color  000 text-decoration none    lt  style gt        docprint document write   lt  head gt  lt body onLoad  self print    gt  lt center gt        docprint document write content vlue      docprint document write   lt  center gt  lt  body gt  lt  html gt        docprint document close       docprint focus       lt  script gt    Step 2  Call the PrintMe  DivID   function by an onclick event    lt input type  button  name  btnprint  value  Print  onclick  PrintMe  divid     gt   lt div id  divid  gt  here is some text to print inside this div with an id  divid   lt  div gt

User · Answer

Here is a general solution  using CSS only  which I have verified to work    media print     body         visibility  hidden         section-to-print   section-to-print         visibility  visible         section-to-print       position  absolute      left  0      top  0          Alternative approaches aren t so good  Using display is tricky because if any element has display none then none of its descendants will display either  To use it  you have to change the structure of your page   Using visibility works better since you can turn on visibility for descendants  The invisible elements still affect the layout though  so I move section-to-print to the top left so it prints properly

User · Answer

If you only want to print this div  you must use the instruction    media print        display none        mydiv display block

User · Answer

Sandro s method works great   I tweaked it to allow for allowing multiple printMe links  particularily to be used in tabbed pages and expanding text   function processPrint printMe     lt -- calling for a variable here  var printReadyElem   document getElementById printMe     lt -- removed the quotes around printMe to ask for a variable   lt a href  javascript void processPrint  divID      gt Print lt  a gt   lt -- passing the div ID to be printed on to the function to turn the printMe variable into the div ID  single quotes are needed

User · Answer

I had multiple images each with a button and needed to click on a button to print each div with an image  This solution works if I have disabled cache in my browser  and the image size doesn t change in Chrome           function printDiv divName             var printContents   document getElementById divName  innerHTML          w   window open             w document write printContents           w document write   lt scr     ipt type  text javascript  gt      window onload   function     window print    window close            lt  sc     ript gt              w document close       necessary for IE  gt   10         w focus       necessary for IE  gt   10          return true          lt div id  printableArea  gt         lt h1 gt Print me lt  h1 gt   lt  div gt    lt input type  button  onclick  printDiv  printableArea    value  print a div     gt

User · Answer

base on  Kevin Florida answer  i made a way to avoid script on current page disable because of overwrite content  I use other file called  printScreen php   or  html   Wrap everything you want to print in a div  printSource   And with javascript  open a new window you created before   printScreen php   then grab content in  printSource  of top window   Here is the code   Main window     echo   lt div id  printSource  gt      everything you want to print here echo   lt  div gt       add button or link to print echo   lt button id  btnPrint  gt Print lt  button gt      lt script gt        btnPrint   click function        printDiv  printSource             function printDiv divName       var printContents   document getElementById divName  innerHTML     var originalContents   document body innerHTML     w window open  printScreen php     blank    toolbar yes scrollbars yes resizable yes top 50 left 50 width 900 height 400          lt  script gt    This is  printScreen php  - other file to grab content to print    lt head gt     write everything about style script here   css   js    lt  head gt   lt body id  mainBody  gt  lt  body gt   lt  html gt     lt script gt        get everything you want to print from top window     src   window opener document getElementById  printSource   innerHTML         paste to  mainBody          mainBody   html src       window print        window close     lt  script gt

User · Answer

The Best way to Print particular Div or any Element  printDiv  myDiv     function printDiv id           var printContents   document getElementById id  innerHTML          var originalContents   document body innerHTML          document body innerHTML   printContents          window print            document body innerHTML   originalContents

User · Answer

I tried many of the solutions provided None of them worked perfectly  They either lose CSS or JavaScript bindings  I found a perfect and easy solution that neither losses CSS nor JavaScript bindings    HTML    lt div id  printarea  gt       lt p gt This is a sample text for printing purpose  lt  p gt       lt input type  button  id  btn  value  Print  onclick  printFunc     gt   lt  div gt   lt p gt Do not print  lt  p gt    Javascript     function printFunc         var divToPrint   document getElementById  printarea        var htmlToPrint                  lt style type  text css  gt              table th  table td               border 1px solid  000              padding 0 5em                             lt  style gt        htmlToPrint    divToPrint outerHTML      newWin   window open          newWin document write   lt h3 align  center  gt Print Page lt  h3 gt         newWin document write htmlToPrint       newWin print        newWin close

User · Answer

Without CSS clowning  html and pure javascript with iframe does its work best  Then simply click the text  you want to print  Current example for id elements with text content  html body   lt div id  quot monitor quot  onclick  quot idElementPrint   quot  gt text i want to print lt  div gt   pure javascript    or  monitor textContent    quot click me to print textual content quot    const idElementPrint        gt        let ifram   document createElement  quot iframe quot        ifram style    quot display none quot       document body appendChild ifram       pri   ifram contentWindow      pri document open        pri document write monitor textContent       pri document close        pri focus        pri print

User · Answer

You could use a separate CSS style which disables every other content except the one with the id  printarea    See CSS Design  Going to Print for further explanation and examples

User · Answer

I tried many of the solutions provided None of them worked perfectly  They either lose CSS or JavaScript bindings  I found a perfect and easy solution that neither losses CSS nor JavaScript bindings    HTML    lt div id  printarea  gt       lt p gt This is a sample text for printing purpose  lt  p gt       lt input type  button  id  btn  value  Print  onclick  printFunc     gt   lt  div gt   lt p gt Do not print  lt  p gt    Javascript     function printFunc         var divToPrint   document getElementById  printarea        var htmlToPrint                  lt style type  text css  gt              table th  table td               border 1px solid  000              padding 0 5em                             lt  style gt        htmlToPrint    divToPrint outerHTML      newWin   window open          newWin document write   lt h3 align  center  gt Print Page lt  h3 gt         newWin document write htmlToPrint       newWin print        newWin close

User · Answer

With CSS 3 you could use the following   body   not  printarea        display  none

User · Answer

I have a better solution with minimal code   Place your printable part inside a div with an id like this    lt div id  printableArea  gt         lt h1 gt Print me lt  h1 gt   lt  div gt    lt input type  button  onclick  printDiv  printableArea    value  print a div     gt    Then add an event like an onclick  as shown above   and pass the id of the div like I did above   Now let s create a really simple javascript   function printDiv divName         var printContents   document getElementById divName  innerHTML       var originalContents   document body innerHTML        document body innerHTML   printContents        window print          document body innerHTML   originalContents      Notice how simple this is   No popups  no new windows  no crazy styling  no JS libraries like jquery   The problem with really complicated solutions  the answer isn t complicated and not what I m referring to  is the fact that it will NEVER translate across all browsers  ever   If you want to make the styles different  do as shown in the checked answer by adding the media attribute to a stylesheet link  media  print       No fluff  lightweight  it just works

User · Answer

Could you use a print stylesheet  and use CSS to arrange the content you wanted printed  Read this article for more pointers

User · Answer

Could you use a print stylesheet  and use CSS to arrange the content you wanted printed  Read this article for more pointers

User · Answer

Kevin Florida If you have multiple divs with same class  you can use it like this     lt div style  display none  gt      lt div id  modal-2  class  printableArea  gt        lt input type  button  class  printdiv-btn  value  print a div     gt      lt  div gt    lt  div gt    i was using Colorbox inner content type    document  on  click     printdiv-btn   function e        e preventDefault         var  this     this       var originalContent      body   html        var printArea    this parents   printableArea   html            body   html printArea       window print           body   html originalContent

User · Answer

All the answers so far are pretty flawed - they either involve adding class  noprint  to everything or will mess up display within  printable   I think the best solution would be to create a wrapper around the non-printable stuff    lt head gt       lt style type  text css  gt        printable   display  none          media print                non-printable   display  none             printable   display  block               lt  style gt   lt  head gt   lt body gt       lt div id  non-printable  gt          Your normal page contents      lt  div gt        lt div id  printable  gt          Printer version      lt  div gt   lt  body gt    Of course this is not perfect as it involves moving things around in your HTML a bit

User · Answer

Without CSS clowning  html and pure javascript with iframe does its work best  Then simply click the text  you want to print  Current example for id elements with text content  html body   lt div id  quot monitor quot  onclick  quot idElementPrint   quot  gt text i want to print lt  div gt   pure javascript    or  monitor textContent    quot click me to print textual content quot    const idElementPrint        gt        let ifram   document createElement  quot iframe quot        ifram style    quot display none quot       document body appendChild ifram       pri   ifram contentWindow      pri document open        pri document write monitor textContent       pri document close        pri focus        pri print

User · Answer

In my case I had to print a image inside a page  When I used the solution voted  I had 1 blank page and the other one showing the image  Hope it will help someone   Here is the css I used    media print     body         visibility  hidden          not-print         display  none          to-print   to-print         visibility  visible          to-print       display  block  important      position  absolute      left  0      top  0      width  auto      height  99           My html is    lt div id  not-print   gt     lt header class  row wrapper page-heading  gt      lt  header gt      lt div class  wrapper wrapper-content  gt       lt    image tag  qrcode image url   size   250x250    alt      qrcode name     gt     lt  div gt   lt  div gt    lt div id  to-print  style  display  none   gt     lt    image tag  qrcode image url   size   300x300    alt      qrcode name     gt   lt  div gt

User · Answer

hm     use the type of a stylsheet for printing     eg    lt link rel  stylesheet  type  text css  href  print css  media  print    gt    print css   div   display  none     yourdiv   display  block

User · Answer

Use a special Stylesheet for printing   lt link rel  stylesheet  href  print css  type  text css  media  print    gt    and then add a class i e   noprint  to every tag which s content you don t want to print   In the CSS use    noprint     display  none

User · Answer

I m very late to this party  but I d like to pitch in with yet another approach  I wrote a tiny JavaScript module called PrintElements for dynamically printing parts of a webpage    It works by iterating through selected node elements  and for each node  it traverses up the DOM tree until the BODY element  At each level  including the initial one  which is the to-be-printed node   s level   it attaches a marker class  pe-preserve-print  to the current node  Then attaches another marker class  pe-no-print  to all siblings of the current node  but only if there is no pe-preserve-print class on them  As a third act  it also attaches another class to preserved ancestor elements pe-preserve-ancestor   A dead-simple supplementary print-only css will hide and show respective elements  Some benefits of this approach is that all styles are preserved  it does not open a new window  there is no need to move around a lot of DOM elements  and generally it is non-invasive with your original document   See the demo  or read the related article for further details

User · Answer

The printDiv   function came out a few times  but in that case  you loose all your binding elements and input values  So  my solution is to create a div for everything called  body allin  and another one outside the first one called  body print    Then you call this function   function printDiv divName        var printContents   document getElementById divName  innerHTML       document getElementById  body print   innerHTML   printContents       document getElementById  body allin   style display    none       document getElementById  body print   style display            window print         document getElementById  body print   innerHTML           document getElementById  body allin   style display           document getElementById  body print   style display    none

User · Answer

You could use a separate CSS style which disables every other content except the one with the id  printarea    See CSS Design  Going to Print for further explanation and examples

User · Answer

Best css to fit space empty height    media print     body         visibility  hidden      height 0         section-to-print   section-to-print         visibility  visible      height auto         section-to-print       position  absolute      left  0      top  0

User · Answer

All the answers so far are pretty flawed - they either involve adding class  noprint  to everything or will mess up display within  printable   I think the best solution would be to create a wrapper around the non-printable stuff    lt head gt       lt style type  text css  gt        printable   display  none          media print                non-printable   display  none             printable   display  block               lt  style gt   lt  head gt   lt body gt       lt div id  non-printable  gt          Your normal page contents      lt  div gt        lt div id  printable  gt          Printer version      lt  div gt   lt  body gt    Of course this is not perfect as it involves moving things around in your HTML a bit

User · Answer

lt script type  text javascript  gt     function printDiv divId           var printContents   document getElementById divId  innerHTML         var originalContents   document body innerHTML         document body innerHTML     lt html gt  lt head gt  lt title gt  lt  title gt  lt  head gt  lt body gt     printContents     lt  body gt           window print           document body innerHTML   originalContents        lt  script gt

User · Answer

Use a special Stylesheet for printing   lt link rel  stylesheet  href  print css  type  text css  media  print    gt    and then add a class i e   noprint  to every tag which s content you don t want to print   In the CSS use    noprint     display  none

User · Answer

I picked up the content using JavaScript and created a window that I could print in stead

User · Answer

lt script type  text javascript  gt     function printDiv divId           var printContents   document getElementById divId  innerHTML         var originalContents   document body innerHTML         document body innerHTML     lt html gt  lt head gt  lt title gt  lt  title gt  lt  head gt  lt body gt     printContents     lt  body gt           window print           document body innerHTML   originalContents        lt  script gt

User · Answer

I picked up the content using JavaScript and created a window that I could print in stead

User · Answer

The Best way to Print particular Div or any Element  printDiv  myDiv     function printDiv id           var printContents   document getElementById id  innerHTML          var originalContents   document body innerHTML          document body innerHTML   printContents          window print            document body innerHTML   originalContents

User · Answer

Give whatever element you want to print the id printMe  Include this script in your head tag    lt script language  javascript  gt      var gAutoPrint   true       function processPrint         if  document getElementById    null       var html     lt HTML gt  n lt HEAD gt  n       if  document getElementsByTagName    null       var headTags   document getElementsByTagName  head        if  headTags length  gt  0  html    headTags 0  innerHTML             html      n lt  HE     AD gt  n lt BODY gt  n       var printReadyElem   document getElementById  printMe         if  printReadyElem    null  html    printReadyElem innerHTML      else      alert  Error  no contents         return             html      n lt  BO     DY gt  n lt  HT     ML gt        var printWin   window open     processPrint        printWin document open        printWin document write html       printWin document close         if  gAutoPrint  printWin print          else alert  Browser not supported             lt  script gt   Call the function   lt a href  javascript void processPrint      gt Print lt  a gt

User · Answer

I m very late to this party  but I d like to pitch in with yet another approach  I wrote a tiny JavaScript module called PrintElements for dynamically printing parts of a webpage    It works by iterating through selected node elements  and for each node  it traverses up the DOM tree until the BODY element  At each level  including the initial one  which is the to-be-printed node   s level   it attaches a marker class  pe-preserve-print  to the current node  Then attaches another marker class  pe-no-print  to all siblings of the current node  but only if there is no pe-preserve-print class on them  As a third act  it also attaches another class to preserved ancestor elements pe-preserve-ancestor   A dead-simple supplementary print-only css will hide and show respective elements  Some benefits of this approach is that all styles are preserved  it does not open a new window  there is no need to move around a lot of DOM elements  and generally it is non-invasive with your original document   See the demo  or read the related article for further details

User · Answer

Could you use a print stylesheet  and use CSS to arrange the content you wanted printed  Read this article for more pointers

User · Answer

With jQuery it s as simple as this   w window open    w document write     report left inner   html     w print    w close

User · Answer

With CSS 3 you could use the following   body   not  printarea        display  none

User · Answer

In my case I had to print a image inside a page  When I used the solution voted  I had 1 blank page and the other one showing the image  Hope it will help someone   Here is the css I used    media print     body         visibility  hidden          not-print         display  none          to-print   to-print         visibility  visible          to-print       display  block  important      position  absolute      left  0      top  0      width  auto      height  99           My html is    lt div id  not-print   gt     lt header class  row wrapper page-heading  gt      lt  header gt      lt div class  wrapper wrapper-content  gt       lt    image tag  qrcode image url   size   250x250    alt      qrcode name     gt     lt  div gt   lt  div gt    lt div id  to-print  style  display  none   gt     lt    image tag  qrcode image url   size   300x300    alt      qrcode name     gt   lt  div gt

User · Answer

The printDiv   function came out a few times  but in that case  you loose all your binding elements and input values  So  my solution is to create a div for everything called  body allin  and another one outside the first one called  body print    Then you call this function   function printDiv divName        var printContents   document getElementById divName  innerHTML       document getElementById  body print   innerHTML   printContents       document getElementById  body allin   style display    none       document getElementById  body print   style display            window print         document getElementById  body print   innerHTML           document getElementById  body allin   style display           document getElementById  body print   style display    none

User · Answer

base on  Kevin Florida answer  i made a way to avoid script on current page disable because of overwrite content  I use other file called  printScreen php   or  html   Wrap everything you want to print in a div  printSource   And with javascript  open a new window you created before   printScreen php   then grab content in  printSource  of top window   Here is the code   Main window     echo   lt div id  printSource  gt      everything you want to print here echo   lt  div gt       add button or link to print echo   lt button id  btnPrint  gt Print lt  button gt      lt script gt        btnPrint   click function        printDiv  printSource             function printDiv divName       var printContents   document getElementById divName  innerHTML     var originalContents   document body innerHTML     w window open  printScreen php     blank    toolbar yes scrollbars yes resizable yes top 50 left 50 width 900 height 400          lt  script gt    This is  printScreen php  - other file to grab content to print    lt head gt     write everything about style script here   css   js    lt  head gt   lt body id  mainBody  gt  lt  body gt   lt  html gt     lt script gt        get everything you want to print from top window     src   window opener document getElementById  printSource   innerHTML         paste to  mainBody          mainBody   html src       window print        window close     lt  script gt

User · Answer

You can use this  http   vikku info codesnippets javascript print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document   Or use visibility visible and visibility hidden css property together with  media print     display none  will hide all nested  display block   That is not solution

User · Answer

With CSS 3 you could use the following   body   not  printarea        display  none

User · Answer

Give whatever element you want to print the id printMe  Include this script in your head tag    lt script language  javascript  gt      var gAutoPrint   true       function processPrint         if  document getElementById    null       var html     lt HTML gt  n lt HEAD gt  n       if  document getElementsByTagName    null       var headTags   document getElementsByTagName  head        if  headTags length  gt  0  html    headTags 0  innerHTML             html      n lt  HE     AD gt  n lt BODY gt  n       var printReadyElem   document getElementById  printMe         if  printReadyElem    null  html    printReadyElem innerHTML      else      alert  Error  no contents         return             html      n lt  BO     DY gt  n lt  HT     ML gt        var printWin   window open     processPrint        printWin document open        printWin document write html       printWin document close         if  gAutoPrint  printWin print          else alert  Browser not supported             lt  script gt   Call the function   lt a href  javascript void processPrint      gt Print lt  a gt

User · Answer

One more approch without affecting current page and it also persist the css while printing  Here selector must be specific div selector which content we need to print   printWindow selector  title       var divContents     selector  html       var  cssLink      link       var printWindow   window open          height     window outerHeight   0 6      width     window outerWidth    0 6      printWindow document write   lt html gt  lt head gt  lt h2 gt  lt b gt  lt title gt     title     lt  title gt  lt  b gt  lt  h2 gt        for var i   0  i lt  cssLink length  i          printWindow document write  cssLink i  outerHTML           printWindow document write   lt  head gt  lt body  gt        printWindow document write divContents      printWindow document write   lt  body gt  lt  html gt        printWindow document close       printWindow onload   function                  printWindow focus                setTimeout  function                      printWindow print                    printWindow close                   100                   Here provided some time out show that external css get applied to it

User · Answer

hm     use the type of a stylsheet for printing     eg    lt link rel  stylesheet  type  text css  href  print css  media  print    gt    print css   div   display  none     yourdiv   display  block

User · Answer

Step 1  Write the following javascript inside your head tag   lt script language  javascript  gt  function PrintMe DivID    var disp setting  toolbar yes location no    disp setting   directories yes menubar yes    disp setting   scrollbars yes width 650  height 600  left 100  top 25      var content vlue   document getElementById DivID  innerHTML     var docprint window open       disp setting      docprint document open       docprint document write   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN        docprint document write   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt        docprint document write   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt        docprint document write   lt head gt  lt title gt My Title lt  title gt        docprint document write   lt style type  text css  gt body  margin 0px        docprint document write  font-family verdana Arial color  000        docprint document write  font-family Verdana  Geneva  sans-serif  font-size 12px         docprint document write  a color  000 text-decoration none    lt  style gt        docprint document write   lt  head gt  lt body onLoad  self print    gt  lt center gt        docprint document write content vlue      docprint document write   lt  center gt  lt  body gt  lt  html gt        docprint document close       docprint focus       lt  script gt    Step 2  Call the PrintMe  DivID   function by an onclick event    lt input type  button  name  btnprint  value  Print  onclick  PrintMe  divid     gt   lt div id  divid  gt  here is some text to print inside this div with an id  divid   lt  div gt

User · Answer

If you only want to print this div  you must use the instruction    media print        display none        mydiv display block

User · Answer

printDiv divId    A generalized solution to print any div on any page   I had a similar issue but I wanted  a  to be able to print the whole page  or  b  print any one of several specific areas   My solution  thanks to much of the above  allows you to specify any div object to be printed     The key for this solution is to add an appropriate rule to the the print media style sheet so that the requested div  and its contents  will be printed   First  create the needed print css to suppress everything  but without the specific rule to allow the element you want to print       lt style type  text css  media  print  gt     body  visibility hidden        noprintarea  visibility hidden  display none      noprintcontent   visibility hidden        print   visibility visible  display block     lt  style gt    Note that I have added new class rules     noprintarea allows you to suppress the printing of elements within your div- both the content and the block  noprintcontent allows you to suppress the printing of elements within your div- the content is suppressed but and the allocated area is left empty   print allows you to have items that show up in the printed version but not on the screen page   These will normally have  display none  for the screen style    Then insert three JavaScript functions   The first merely toggles the print media style sheet on and off    function disableSheet thisSheet setDisabled    document styleSheets thisSheet  disabled setDisabled         The second does the real work and the third cleans up afterward   The second  printDiv  activates the print media style sheet  then appends a new rule to allow the desired div to print  issues the print  and then adds a delay before the final housekeeping  otherwise the styles can be reset before the print is actually done      function printDiv divId          Enable the print CSS   this temporarily disables being able to print the whole page    disableSheet 0 false         Get the print style sheet and add a new rule for this div   var sheetObj document styleSheets 0       var showDivCSS  visibility visible display block position absolute top 30px left 30px      if  sheetObj rules    sheetObj addRule     divId showDivCSS       else                  sheetObj insertRule     divId     showDivCSS     sheetObj cssRules length       print          need a brief delay or the whole page will print   setTimeout  printDivRestore    100         The final functions deletes the added rule and sets the print style again to disabled so the whole page can be printed    function printDivRestore          remove the div-specific rule   var sheetObj document styleSheets 0       if  sheetObj rules    sheetObj removeRule sheetObj rules length-1       else                  sheetObj deleteRule sheetObj cssRules length-1           and re-enable whole page printing   disableSheet 0 true       The only other thing to do is to add one line to your onload processing so that the print style is initially disabled thereby allowing whole page printing     lt body onLoad  disableSheet 0 true   gt    Then  from anywhere in your document  you can print a div  Just issue printDiv  thedivid   from a button or whatever    A big plus for this approach it provides a general solution to printing selected content from within a page   It also allows use of existing styles for elements that are printed - including the containing div     NOTE   In my implementation  this must be the first style sheet   Change the sheet references  0  to the appropriate sheet number if you need to make it later in the sheet sequence

User · Answer

I didn t really like any of these answers as a whole   If you have a class  say printableArea  and have that as an immediate child of body  then you can do something like this in your print CSS   body  gt    not  printableArea        display  none       Not needed if already showing body  gt   printableArea       display  block      For those looking for printableArea in another place  you would need to make sure the parents of printableArea are shown   body  gt    not  parentDiv    parentDiv  gt    not  printableArea        display  none       Not needed if already showing body  gt   printableArea       display  block      Using the visibility can cause a lot of spacing issues and blank pages   This is because the visibility maintains the elements space  just makes it hidden  where as display removes it and allows other elements to take up its space    The reason why this solution works is that you are not grabbing all elements  just the immediate children of body and hiding them   The other solutions below with display css  hide all the elements  which effects everything inside of printableArea content   I wouldn t suggest javascript as you would need to have a print button that the user clicks and the standard browser print buttons wouldn t have the same effect   If you really need to do that  what I would do is store the html of body  remove all unwanted elements  print  then add the html back   As mentioned though  I would avoid this if you can and use a CSS option like above   NOTE  You can add whatever CSS into the print CSS using inline styles    lt style type  text css  gt   media print        styles here    lt  style gt    Or like I usually use is a link tag    lt link rel  stylesheet  type  text css  media  print  href  print css    gt

User · Answer

I found the solution    media print        print-area           background-color  white          height  100           width  auto          position  absolute          top  0          bottom  0          left  0          right  0          z-index 1500          visibility  visible             page          size  portrait          margin  1cm          IF print-area parent element is position absolute        ui-dialog       ui-dialog  ui-dialog-content          position unset  important          visibility  hidden

User · Answer

printDiv divId    A generalized solution to print any div on any page   I had a similar issue but I wanted  a  to be able to print the whole page  or  b  print any one of several specific areas   My solution  thanks to much of the above  allows you to specify any div object to be printed     The key for this solution is to add an appropriate rule to the the print media style sheet so that the requested div  and its contents  will be printed   First  create the needed print css to suppress everything  but without the specific rule to allow the element you want to print       lt style type  text css  media  print  gt     body  visibility hidden        noprintarea  visibility hidden  display none      noprintcontent   visibility hidden        print   visibility visible  display block     lt  style gt    Note that I have added new class rules     noprintarea allows you to suppress the printing of elements within your div- both the content and the block  noprintcontent allows you to suppress the printing of elements within your div- the content is suppressed but and the allocated area is left empty   print allows you to have items that show up in the printed version but not on the screen page   These will normally have  display none  for the screen style    Then insert three JavaScript functions   The first merely toggles the print media style sheet on and off    function disableSheet thisSheet setDisabled    document styleSheets thisSheet  disabled setDisabled         The second does the real work and the third cleans up afterward   The second  printDiv  activates the print media style sheet  then appends a new rule to allow the desired div to print  issues the print  and then adds a delay before the final housekeeping  otherwise the styles can be reset before the print is actually done      function printDiv divId          Enable the print CSS   this temporarily disables being able to print the whole page    disableSheet 0 false         Get the print style sheet and add a new rule for this div   var sheetObj document styleSheets 0       var showDivCSS  visibility visible display block position absolute top 30px left 30px      if  sheetObj rules    sheetObj addRule     divId showDivCSS       else                  sheetObj insertRule     divId     showDivCSS     sheetObj cssRules length       print          need a brief delay or the whole page will print   setTimeout  printDivRestore    100         The final functions deletes the added rule and sets the print style again to disabled so the whole page can be printed    function printDivRestore          remove the div-specific rule   var sheetObj document styleSheets 0       if  sheetObj rules    sheetObj removeRule sheetObj rules length-1       else                  sheetObj deleteRule sheetObj cssRules length-1           and re-enable whole page printing   disableSheet 0 true       The only other thing to do is to add one line to your onload processing so that the print style is initially disabled thereby allowing whole page printing     lt body onLoad  disableSheet 0 true   gt    Then  from anywhere in your document  you can print a div  Just issue printDiv  thedivid   from a button or whatever    A big plus for this approach it provides a general solution to printing selected content from within a page   It also allows use of existing styles for elements that are printed - including the containing div     NOTE   In my implementation  this must be the first style sheet   Change the sheet references  0  to the appropriate sheet number if you need to make it later in the sheet sequence

User · Answer

All the answers so far are pretty flawed - they either involve adding class  noprint  to everything or will mess up display within  printable   I think the best solution would be to create a wrapper around the non-printable stuff    lt head gt       lt style type  text css  gt        printable   display  none          media print                non-printable   display  none             printable   display  block               lt  style gt   lt  head gt   lt body gt       lt div id  non-printable  gt          Your normal page contents      lt  div gt        lt div id  printable  gt          Printer version      lt  div gt   lt  body gt    Of course this is not perfect as it involves moving things around in your HTML a bit

User · Answer

If you only want to print this div  you must use the instruction    media print        display none        mydiv display block

User · Answer

All the answers so far are pretty flawed - they either involve adding class  noprint  to everything or will mess up display within  printable   I think the best solution would be to create a wrapper around the non-printable stuff    lt head gt       lt style type  text css  gt        printable   display  none          media print                non-printable   display  none             printable   display  block               lt  style gt   lt  head gt   lt body gt       lt div id  non-printable  gt          Your normal page contents      lt  div gt        lt div id  printable  gt          Printer version      lt  div gt   lt  body gt    Of course this is not perfect as it involves moving things around in your HTML a bit

User · Answer

Kevin Florida If you have multiple divs with same class  you can use it like this     lt div style  display none  gt      lt div id  modal-2  class  printableArea  gt        lt input type  button  class  printdiv-btn  value  print a div     gt      lt  div gt    lt  div gt    i was using Colorbox inner content type    document  on  click     printdiv-btn   function e        e preventDefault         var  this     this       var originalContent      body   html        var printArea    this parents   printableArea   html            body   html printArea       window print           body   html originalContent

User · Answer

Here is a general solution  using CSS only  which I have verified to work    media print     body         visibility  hidden         section-to-print   section-to-print         visibility  visible         section-to-print       position  absolute      left  0      top  0          Alternative approaches aren t so good  Using display is tricky because if any element has display none then none of its descendants will display either  To use it  you have to change the structure of your page   Using visibility works better since you can turn on visibility for descendants  The invisible elements still affect the layout though  so I move section-to-print to the top left so it prints properly

User · Answer

You can use this  http   vikku info codesnippets javascript print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document   Or use visibility visible and visibility hidden css property together with  media print     display none  will hide all nested  display block   That is not solution

User · Answer

You could use a separate CSS style which disables every other content except the one with the id  printarea    See CSS Design  Going to Print for further explanation and examples

User · Answer

You could use a separate CSS style which disables every other content except the one with the id  printarea    See CSS Design  Going to Print for further explanation and examples

User · Answer

I didn t really like any of these answers as a whole   If you have a class  say printableArea  and have that as an immediate child of body  then you can do something like this in your print CSS   body  gt    not  printableArea        display  none       Not needed if already showing body  gt   printableArea       display  block      For those looking for printableArea in another place  you would need to make sure the parents of printableArea are shown   body  gt    not  parentDiv    parentDiv  gt    not  printableArea        display  none       Not needed if already showing body  gt   printableArea       display  block      Using the visibility can cause a lot of spacing issues and blank pages   This is because the visibility maintains the elements space  just makes it hidden  where as display removes it and allows other elements to take up its space    The reason why this solution works is that you are not grabbing all elements  just the immediate children of body and hiding them   The other solutions below with display css  hide all the elements  which effects everything inside of printableArea content   I wouldn t suggest javascript as you would need to have a print button that the user clicks and the standard browser print buttons wouldn t have the same effect   If you really need to do that  what I would do is store the html of body  remove all unwanted elements  print  then add the html back   As mentioned though  I would avoid this if you can and use a CSS option like above   NOTE  You can add whatever CSS into the print CSS using inline styles    lt style type  text css  gt   media print        styles here    lt  style gt    Or like I usually use is a link tag    lt link rel  stylesheet  type  text css  media  print  href  print css    gt

User · Answer

I picked up the content using JavaScript and created a window that I could print in stead

User · Answer

Best css to fit space empty height    media print     body         visibility  hidden      height 0         section-to-print   section-to-print         visibility  visible      height auto         section-to-print       position  absolute      left  0      top  0

User · Answer

Use a special Stylesheet for printing   lt link rel  stylesheet  href  print css  type  text css  media  print    gt    and then add a class i e   noprint  to every tag which s content you don t want to print   In the CSS use    noprint     display  none

User · Answer

If you only want to print this div  you must use the instruction    media print        display none        mydiv display block

User · Answer

I picked up the content using JavaScript and created a window that I could print in stead

User · Answer

This works well   lt style type  quot text css quot  gt   media print   body     visibility  hidden     printcontent     visibility  visible     printcontent   position  absolute  top  40px  left  30px       lt  style gt   Note that this only works with  quot visibility quot    quot display quot  won t do it  Tested in FF3

User · Answer

With jQuery it s as simple as this   w window open    w document write     report left inner   html     w print    w close

User · Answer

I found the solution    media print        print-area           background-color  white          height  100           width  auto          position  absolute          top  0          bottom  0          left  0          right  0          z-index 1500          visibility  visible             page          size  portrait          margin  1cm          IF print-area parent element is position absolute        ui-dialog       ui-dialog  ui-dialog-content          position unset  important          visibility  hidden

User · Answer

I had multiple images each with a button and needed to click on a button to print each div with an image  This solution works if I have disabled cache in my browser  and the image size doesn t change in Chrome           function printDiv divName             var printContents   document getElementById divName  innerHTML          w   window open             w document write printContents           w document write   lt scr     ipt type  text javascript  gt      window onload   function     window print    window close            lt  sc     ript gt              w document close       necessary for IE  gt   10         w focus       necessary for IE  gt   10          return true          lt div id  printableArea  gt         lt h1 gt Print me lt  h1 gt   lt  div gt    lt input type  button  onclick  printDiv  printableArea    value  print a div     gt

User · Answer

With CSS 3 you could use the following   body   not  printarea        display  none

User · Answer

I have a better solution with minimal code   Place your printable part inside a div with an id like this    lt div id  printableArea  gt         lt h1 gt Print me lt  h1 gt   lt  div gt    lt input type  button  onclick  printDiv  printableArea    value  print a div     gt    Then add an event like an onclick  as shown above   and pass the id of the div like I did above   Now let s create a really simple javascript   function printDiv divName         var printContents   document getElementById divName  innerHTML       var originalContents   document body innerHTML        document body innerHTML   printContents        window print          document body innerHTML   originalContents      Notice how simple this is   No popups  no new windows  no crazy styling  no JS libraries like jquery   The problem with really complicated solutions  the answer isn t complicated and not what I m referring to  is the fact that it will NEVER translate across all browsers  ever   If you want to make the styles different  do as shown in the checked answer by adding the media attribute to a stylesheet link  media  print       No fluff  lightweight  it just works

User · Answer

One more approch without affecting current page and it also persist the css while printing  Here selector must be specific div selector which content we need to print   printWindow selector  title       var divContents     selector  html       var  cssLink      link       var printWindow   window open          height     window outerHeight   0 6      width     window outerWidth    0 6      printWindow document write   lt html gt  lt head gt  lt h2 gt  lt b gt  lt title gt     title     lt  title gt  lt  b gt  lt  h2 gt        for var i   0  i lt  cssLink length  i          printWindow document write  cssLink i  outerHTML           printWindow document write   lt  head gt  lt body  gt        printWindow document write divContents      printWindow document write   lt  body gt  lt  html gt        printWindow document close       printWindow onload   function                  printWindow focus                setTimeout  function                      printWindow print                    printWindow close                   100                   Here provided some time out show that external css get applied to it

User · Answer

This works well   lt style type  quot text css quot  gt   media print   body     visibility  hidden     printcontent     visibility  visible     printcontent   position  absolute  top  40px  left  30px       lt  style gt   Note that this only works with  quot visibility quot    quot display quot  won t do it  Tested in FF3

User · Answer

Sandro s method works great   I tweaked it to allow for allowing multiple printMe links  particularily to be used in tabbed pages and expanding text   function processPrint printMe     lt -- calling for a variable here  var printReadyElem   document getElementById printMe     lt -- removed the quotes around printMe to ask for a variable   lt a href  javascript void processPrint  divID      gt Print lt  a gt   lt -- passing the div ID to be printed on to the function to turn the printMe variable into the div ID  single quotes are needed

User · Answer

Use a special Stylesheet for printing   lt link rel  stylesheet  href  print css  type  text css  media  print    gt    and then add a class i e   noprint  to every tag which s content you don t want to print   In the CSS use    noprint     display  none

User · Answer

Could you use a print stylesheet  and use CSS to arrange the content you wanted printed  Read this article for more pointers

User · Answer

hm     use the type of a stylsheet for printing     eg    lt link rel  stylesheet  type  text css  href  print css  media  print    gt    print css   div   display  none     yourdiv   display  block

[javascript] Print <div id="printarea"></div> only?

Examples related to javascript

Examples related to css

Examples related to printing

Examples related to dhtml