How to print HTML content on click of a button but not the page

Question

I want to print some HTML content  when the user clicks on a button  Once the user clicks on that button  the print dialog of the browser will open  but it will not print the webpage  Instead  it will print the some other HTML content which is not displayed on the page   While asking this question  there are few solutions coming into my mind  But I am not sure whether those are good ideas or something better can be done  One of those solutions are  I can keep this HTML content in a div and make it display  to print  but display  none to screen  All other elements on the webpage can be made to display  none for print and display  for the screen  And then call to print   Any better idea

User · Answer

According to this SO link you can print a specific div with  w window open    w document write document getElementsByClassName  report left inner   0  innerH  TML   w print    w close

User · Answer

Below Code May Be Help You     lt html gt   lt head gt   lt script gt  function printPage id       var html   lt html gt       html   document getElementById id  innerHTML      html    lt  html gt        var printWin   window open        left 0 top 0 width 1 height 1 toolbar 0 scrollbars 0 status   0       printWin document write html      printWin document close       printWin focus       printWin print       printWin close       lt  script gt   lt  head gt   lt body gt   lt div id  block1  gt   lt table border  1   gt   lt  tr gt   lt th colspan  3  gt Block 1 lt  th gt   lt  tr gt   lt tr gt   lt th gt 1 lt  th gt  lt th gt XYZ lt  th gt  lt th gt athock lt  th gt   lt  tr gt   lt  table gt    lt  div gt    lt div id  block2  gt      This is Block 2 content  lt  div gt    lt input type  button  value  Print Block 1  onclick  printPage  block1     gt  lt  input gt   lt input type  button  value  Print Block 2  onclick  printPage  block2     gt  lt  input gt   lt  body gt   lt  html gt

User · Answer

x000D   x000D   media print      noPrint      display none        h1    color  f6f6    x000D   lt h1 gt  print me  lt  h1 gt   lt h1 class  noPrint  gt  no print  lt  h1 gt   lt button onclick  window print     class  noPrint  gt  Print Me  lt  button gt  x000D   x000D   x000D   I came across another elegant solution for this  Place your printable part inside a div with an id like this   lt div id  quot printableArea quot  gt         lt h1 gt Print me lt  h1 gt   lt  div gt    lt input type  quot button quot  onclick  quot printDiv  printableArea   quot  value  quot print a div  quot    gt   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     SOURCE   SO Answer

User · Answer

I Want See This  Example http   jsfiddle net 35vAN        lt html gt   lt head gt   lt script type  text javascript  src  http   jqueryjs googlecode com files jquery-1 3 1 min js   gt   lt  script gt    lt script type  text javascript  gt       function PrintElem elem                Popup   elem  html                function Popup data                 var mywindow   window open      my div    height 400 width 600            mywindow document write   lt html gt  lt head gt  lt title gt my div lt  title gt               optional stylesheet     mywindow document write   lt link rel  stylesheet  href  main css  type  text css    gt             mywindow document write   lt  head gt  lt body  gt             mywindow document write data           mywindow document write   lt  body gt  lt  html gt              mywindow print            mywindow close             return true          lt  script gt   lt  head gt   lt body gt    lt div id  mydiv  gt      This will be printed  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Pellentesque a quam at nibh adipiscing interdum  Nulla vitae accumsan ante    lt  div gt    lt div gt      This will not be printed   lt  div gt    lt div id  anotherdiv  gt      Nor will this   lt  div gt    lt input type  button  value  Print Div  onclick  PrintElem   mydiv      gt    lt  body gt    lt  html gt

User · Answer

Here is a pure css version    x000D   x000D   example-print   x000D      display  none  x000D    x000D   media print   x000D      example-screen   x000D         display  none  x000D        x000D       example-print   x000D         display  block  x000D        x000D    x000D   lt div class  example-screen  gt You only see me in the browser lt  div gt  x000D   x000D   lt div class  example-print  gt You only see me in the print lt  div gt  x000D   x000D   x000D

User · Answer

If you add and remove the innerHTML  all javascript  css and more will be loaded twice  and the events will fire twice  happened to me   is better hide content  using jQuery and css like this   function printDiv selector           body  site-container   css  display  none         var content     selector  clone           body  site-container   before content       window print          selector  first   remove           body  site-container   css  display           The div  site-container  contain all site  so you can call the function like   printDiv   someDiv

[javascript] How to print HTML content on click of a button, but not the page?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to printing