Remove header and footer from window print

Question

I am using window print   for printing page  but I got header and footer contains page title  file path  page number and date  How to remove them    I tried print stylesheet also    header   nav   noprint   display  none      Please help  Thanks

User · Answer

This will be the simplest solution  I tried most of the solutions in the internet but only this helped me    print       page  footer  color   fff        page  header  color   fff

User · Answer

I am sure Adding this code on your css file will solve the problem   lt style type  text css  media  print  gt       page                size  auto       auto is the initial value            margin  0mm      this affects the margin in the printer settings           lt  style gt    You may visit this to know more about this

User · Answer

1 For Chrome  amp  IE   lt script language  javascript  gt  function printDiv divName    var printContents   document getElementById divName  innerHTML  var originalContents   document body innerHTML  document getElementById  header   style display    none   document getElementById  footer   style display    none   document body innerHTML   printContents   window print      document body innerHTML   originalContents      lt  script gt   lt div id  div print  gt   lt div id  header  style  background-color White   gt  lt  div gt   lt div id  footer  style  background-color White   gt  lt  div gt   lt  div gt     For FireFox as l2aelba said    Add moznomarginboxes attribute in  Example     lt html moznomarginboxes mozdisallowselectionprint gt

User · Answer

you don t have to write any code  just before calling window print   in the first time change the print settings of your browser  for example in firefox    Press Alt or F10 to see the menu bar  Click on File  then Page Setup Select the tab Margins  amp  Header Footers Change URL for blank -  image   and one another example for IE  I m using IE 11 for previous  versions you can see this Prevent Firefox or Internet Explorer from Printing the URL on Every Page     Press Alt or F10 to see the menu bar  Click on File  then Page Setup in Headers and Footers section Change URL for empty

User · Answer

So basic idea is to have a div  with display none  containing items to print  Now on click of a button do not print to entire body but just that particular div  Faced lots of issues while printing a div  part of HTML  using window print    Used below method and it works seamlessly in edge  chrome and Mozilla for me  let see if it help you too  function printDiv id          var contents   document getElementById id  innerHTML          var frame1   document createElement  iframe            frame1 name    quot frame1 quot           frame1 style position    quot absolute quot           frame1 style top    quot -1000000px quot           document body appendChild frame1           var frameDoc   frame1 contentWindow   frame1 contentWindow   frame1 contentDocument document   frame1 contentDocument document   frame1 contentDocument          frameDoc document open            frameDoc document write  quot  lt html gt  lt head gt  n n                 quot                 quot  lt style type   quot text css  quot  media   quot print  quot  gt  n                        quot                 quot   page n                      n                         quot                 quot size   auto       auto is the initial value    n                         quot                 quot margin  10mm      this affects the margin in the printer settings    n     quot                 quot                   n n                    html n                      n     quot                 quot                     background-color   FFFFFF  n          quot                 quot              n n                    body n                 quot                 quot         font-family   quot Times New Roman  quot   Times  serif  n              quot                 quot            border  none   n                   quot                 quot       margin  0     margin you want for the content    n                 quot                 quot       n                    table   n                    width  100   n       quot                 quot               max-width  100   n                    margin-bottom  20px  n         quot                 quot             border-collapse  collapse  n                  quot                 quot    background-color  transparent  n                    display  table  n         quot                 quot           n                 table-bordered   n                  quot                 quot    border  1px solid  ccc  n                  n                tr   n             quot                 quot         display  table-row  n                    vertical-align  inherit  n               quot                 quot       border-color  inherit  n                    padding 15px  n                  n       quot                 quot            table-bordered tr td  border  1px solid  ccc important  padding 15px important   n    quot                 quot               lt  style gt  lt title gt  lt  title gt  lt  head gt  lt body gt  quot  concat contents   quot  lt  body gt  quot             frameDoc document close            setTimeout function                  window frames  quot frame1 quot   focus                window frames  quot frame1 quot   print                document body removeChild frame1              500           return false     Call this like  lt a href  quot   quot  onclick  quot javascript printDiv  divwithcontenttoprint   quot  gt  Print  lt  a gt

User · Answer

Today my colleague stumbled upon the same issue    As the  margin 0  solution works for chromium based browsers  however  Internet Explorer continue to print footer even if  page margins are set to zero   The solution  more of a hack  was to put negative margin on the  page    page  margin 0 -6cm  html  margin 0 6cm    Please note that negative margin won t work for Y axis  only for X   Hope it helps

User · Answer

page   margin  0    works fine in Chrome and Firefox  I haven t found a way to fix IE through css  But you can go into Page Setup in IE on your own machine at and set the margins to 0  Press alt and then the file menu in the top left corner and you ll find Page Setup  This only works for the one machine at a time

User · Answer

In Chrome it s possible to hide this automatic header footer using   page   margin  0      Since the contents will extend to page s limits  the page printing header footer will be absent  You should  of course  in this case  set some margins paddings in your body element so that the content won t extend all the way to the page s edge  Since  common printers just can t get no-margins printing and it s probably not what you want  you should use something like this    media print      page   margin  0      body   margin  1 6cm        As Martin pointed out in a comment  if the page have a long element that scrolls past one page  like a big table   the margin is ignored and the printed version will look weird   At the time original of this answer  May 2013   it only worked on Chrome  not sure about it now  never needed to try again  If you need support for a browser that can t hable  you can create a PDF on the fly and print that  you can create a self-printing PDF embedding JavaScript on it   but that s a huge hassle

User · Answer

Firefox     Add moznomarginboxes attribute in  lt html gt    Example     lt html moznomarginboxes mozdisallowselectionprint gt

User · Answer

avoiding the top and bottom margin will solve your problem  media print         page           margin-left  0 5in          margin-right  0 5in          margin-top  0          margin-bottom  0

User · Answer

lt html gt   lt head gt       lt title gt Print lt  title gt       lt script type  quot text javascript quot  gt  window print    document margin  none    lt  script gt   lt  head gt   lt body gt     lt p gt hello lt  p gt     lt p gt hi lt  p gt   lt  body gt   lt  html gt     place it in a script file or in the script tag  This will remove all the margins and you won t be able to see the headers and footers

User · Answer

The CSS standard enables some advanced formatting  There is a  page directive in CSS that enables some formatting that applies only to paged media  like paper   See http   www w3 org TR 1998 REC-CSS2-19980512 page html   x000D   x000D   lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D   lt head gt  x000D       lt title gt Print Test lt  title gt  x000D       lt style type  text css  media  print  gt  x000D           page  x000D            x000D              size  auto       auto is the current printer page size    x000D              margin  0mm      this affects the margin in the printer settings    x000D            x000D   x000D          body  x000D            x000D              background-color  FFFFFF   x000D              border  solid 1px black   x000D              margin  0px      the margin on the content before printing    x000D           x000D       lt  style gt  x000D   lt  head gt  x000D   lt body gt  x000D     lt div gt Top line lt  div gt  x000D     lt div gt Line 2 lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    and for firefox use it  In Firefox  https   bug743252 bugzilla mozilla org attachment cgi id 714383  view page source    tag HTML    In your code  replace  lt html gt  with  lt html moznomarginboxes mozdisallowselectionprint gt

User · Answer

If you happen to scroll down to this point  I found a solution for Firefox  It will print contents from a specific div without the footers and headers  You can customize as you wish   Firstly  download and install this addon    JSPrintSetup    Secondly  write this function     lt script gt  function PrintElem elem        var mywindow   window open      PRINT    height 400 width 600        mywindow document write   lt html gt  lt head gt  lt title gt     document title      lt  title gt         mywindow document write   lt  head gt  lt body  gt         mywindow document write elem       mywindow document write   lt  body gt  lt  html gt         mywindow document close       necessary for IE  gt   10     mywindow focus       necessary for IE  gt   10         jsPrintSetup setPrinter  PDFCreator      set the printer if you wish    jsPrintSetup setSilentPrint 1         sent empty page header    jsPrintSetup setOption  headerStrLeft           jsPrintSetup setOption  headerStrCenter           jsPrintSetup setOption  headerStrRight               set empty page footer    jsPrintSetup setOption  footerStrLeft           jsPrintSetup setOption  footerStrCenter           jsPrintSetup setOption  footerStrRight               print my window silently      jsPrintSetup printWindow mywindow      jsPrintSetup setSilentPrint 1     change to 0 if you want print dialog      mywindow close         return true     lt  script gt    Thirdly  In your code  wherever you want to write the print code  do this  I have used JQuery  You can use plain javascript     lt script gt      print   click function          var contents       yourDivToPrint   html        PrintElem contents       lt  script gt    Obviously  you need the link to click    lt a href     id  print  gt Print my Div lt  a gt    And your div to print    lt div id  yourDivToPrint  gt      lt  div gt

User · Answer

media print        footer       non-printable           display  none  important             printable           display  block

[css] Remove header and footer from window.print()

Examples related to css

Examples related to printing